📊 Grid de 12 Colunas - O Sistema Classico
O sistema de 12 colunas e o padrao da industria desde Bootstrap. Por que 12? E divisivel por 2, 3, 4 e 6 - permitindo layouts flexiveis com math simples.
🧮 Por que 12 Colunas?
12 / 2 = 6
Duas colunas iguais (50% cada)
12 / 3 = 4
Tres colunas iguais (33.3% cada)
12 / 4 = 3
Quatro colunas iguais (25% cada)
8 + 4 = 12
Sidebar classico (66% + 33%)
👁️ Visualizacao: Grid de 12 Colunas
💻 Codigo Tailwind
<!-- Layout 8 + 4 (Conteudo + Sidebar) -->
<div class="grid grid-cols-12 gap-6">
<main class="col-span-12 md:col-span-8">
Conteudo principal
</main>
<aside class="col-span-12 md:col-span-4">
Sidebar
</aside>
</div>🎯 Vocabulario para Prompts
Use: grid de 12 colunas,
layout 8+4 para sidebar,
gap de 24px entre colunas,
col-span-6 para metade da largura.
🔲 CSS Grid Basico - display: grid
CSS Grid e o sistema de layout bidimensional nativo do CSS. Diferente de Flexbox (unidimensional), Grid controla linhas E colunas simultaneamente.
📐 Propriedades Fundamentais
display: grid
Transforma elemento em grid container
grid-template-columns
Define numero e tamanho das colunas
grid-template-rows
Define numero e tamanho das linhas
gap
Espacamento entre celulas (row-gap, column-gap)
👁️ Exemplos de grid-template-columns
grid-template-columns: repeat(3, 1fr)
grid-template-columns: 200px 1fr 200px
grid-template-columns: 2fr 1fr
💻 Codigo CSS Grid
/* CSS Puro */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
/* Tailwind equivalente */
<div class="grid grid-cols-3 gap-6">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>🎯 Vocabulario para Prompts
Use: CSS Grid com 3 colunas iguais (1fr),
grid-template-columns: repeat(4, 1fr),
gap de 24px,
unidade fr para colunas flexiveis.
🚀 CSS Grid Avancado - areas, auto-fill, minmax
O verdadeiro poder do CSS Grid aparece com grid-template-areas, auto-fill/auto-fit e minmax(). Layouts complexos em poucas linhas.
🗺️ Grid Template Areas
Defina layouts de forma visual usando nomes para cada area:
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 200px 1fr 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }🔄 auto-fill + minmax() = Grids Responsivos Automaticos
O combo repeat(auto-fill, minmax(250px, 1fr)) cria grids
que se ajustam automaticamente sem media queries:
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}Redimensione a janela para ver o grid se ajustar automaticamente!
🔍 auto-fill vs auto-fit
auto-fill
Cria colunas vazias se sobrar espaco. Mantem o grid preenchido.
auto-fit
Colapsa colunas vazias. Itens expandem para preencher espaco.
🎯 Vocabulario para Prompts
Use: grid-template-areas para layout semantico,
auto-fill com minmax(250px, 1fr) para cards responsivos,
grid auto-responsivo sem media queries,
minmax para colunas flexiveis com minimo.
⚖️ Flexbox vs Grid - Quando Usar Cada Um
A pergunta mais comum: quando usar Flexbox e quando usar Grid? A resposta: Flexbox para componentes, Grid para layouts.
🔲 CSS Grid
- ✓ Layout bidimensional (linhas E colunas)
- ✓ Layouts de pagina complexos
- ✓ Quando voce sabe quantas colunas quer
- ✓ Galerias de imagens/cards
- ✓ Layout "Holy Grail"
📏 Flexbox
- ✓ Layout unidimensional (linha OU coluna)
- ✓ Alinhamento e distribuicao
- ✓ Quando o conteudo dita o layout
- ✓ Navbars, botoes, cards internos
- ✓ Centralizar elementos
💡 Exemplo: Combinando Grid + Flexbox
O segredo e combinar: Grid para o layout geral, Flexbox dentro dos componentes.
/* Layout da pagina com Grid */
<div class="grid grid-cols-12 gap-6">
<!-- Card usando Flexbox interno -->
<div class="col-span-4 flex flex-col">
<img ... />
<div class="flex-1">Conteudo</div>
<div class="flex justify-between">
<span>Preco</span>
<button>Comprar</button>
</div>
</div>
</div>🎯 Vocabulario para Prompts
Use: Grid para layout da pagina, Flexbox para componentes,
flex para centralizar verticalmente,
grid para galeria de cards,
combinar Grid + Flexbox.
📦 Container Queries - Responsividade Baseada em Container
Container Queries sao a revolucao da responsividade. Em vez de responder ao tamanho da viewport, componentes respondem ao tamanho do seu container pai.
🆚 Media Queries vs Container Queries
Media Queries (antigo)
Responde ao tamanho da JANELA do navegador.
@media (min-width: 768px)
Container Queries (novo)
Responde ao tamanho do CONTAINER pai.
@container (min-width: 400px)
💻 Implementando Container Queries
/* 1. Definir o container */
.card-container {
container-type: inline-size;
container-name: card;
}
/* 2. Estilos baseados no container */
@container card (min-width: 400px) {
.card-content {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
/* Tailwind CSS (v3.2+) */
<div class="@container">
<div class="@md:grid @md:grid-cols-2">
...
</div>
</div>✨ Caso de Uso Perfeito
Um card que aparece em diferentes contextos: sidebar (estreito), grid de 3 colunas (medio), e destaque (largo). Com Container Queries, o MESMO componente se adapta automaticamente ao espaco disponivel, sem precisar de variantes diferentes.
🎯 Vocabulario para Prompts
Use: container queries para componentes reutilizaveis,
container-type: inline-size,
@container para responsividade baseada em container,
componente auto-responsivo.
🏗️ Layouts Comuns - Sidebar, Holy Grail, Masonry
Existem padroes de layout que aparecem em 90% dos sites. Dominar esses padroes acelera drasticamente o desenvolvimento.
📋 Sidebar Layout
O layout mais comum: conteudo principal + sidebar.
<div class="grid grid-cols-1
md:grid-cols-[250px_1fr] gap-6">
<aside>Sidebar</aside>
<main>Conteudo</main>
</div>🏆 Holy Grail Layout
Header, footer, sidebar esquerda, sidebar direita, conteudo central.
.holy-grail {
display: grid;
grid-template:
"header header header" auto
"left main right" 1fr
"footer footer footer" auto
/ 200px 1fr 200px;
min-height: 100vh;
}🧱 Masonry Layout (Pinterest-style)
Items de alturas diferentes que preenchem espacos verticais.
/* CSS columns approach */
.masonry {
columns: 3;
column-gap: 1rem;
}
.masonry-item {
break-inside: avoid;
margin-bottom: 1rem;
}📌 Bonus: Sticky Sidebar
Sidebar que acompanha o scroll sem cobrir o footer:
<aside class="sticky top-20 h-fit">
Sidebar content
</aside>🎯 Vocabulario para Prompts
Use: layout sidebar esquerda fixa 250px,
holy grail layout com header sticky,
masonry grid estilo Pinterest,
sidebar sticky que para antes do footer.
📝 Resumo do Modulo
Proximo Modulo:
2.4 - Micro-interacoes: Feedback visual e animacoes sutis que encantam