Grid CSS
O Flexbox alinhou itens em uma direção. O CSS Grid abre o próximo capítulo: linhas e colunas juntas. Ative display: grid, esboce tracks, adicione gap e aprofunde depois nas lições Grid Container, Items, Areas e Responsive.
Uma caixa de ferramentas inicial de Grid
📊 Grid em um relance
| Ideia | Trabalho do dia a dia |
|---|---|
| Contêiner Grid | Pai com display: grid (ou inline-grid) |
| Itens Grid | Filhos diretos que se sentam na grade |
| Tracks | Linhas e colunas que formam a malha |
| Células / áreas | Espaços onde os itens pousam (áreas numa lição posterior) |
gap |
Canaletas entre tracks sem truques de margem |
Unidade fr |
Dividir o espaço sobrado entre tracks (prévia) |
Pense no Grid como papel quadriculado da página: primeiro você desenha colunas e linhas, depois deixa o conteúdo nas células. O Flexbox continua ótimo para barras de ferramentas e grupos de um só eixo.
display: grid — ligue a malha
Coloque display: grid no pai. Os filhos viram itens de grade automaticamente — nenhuma classe extra para o modelo básico.
.board {
display: grid;
}
Colunas primeiro — um modelo simples
grid-template-columns define tracks verticais. Três colunas iguais são um esboço calmo para cards ou azulejos.
.board {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
gap — canaletas honestas
Use gap (ou row-gap / column-gap) para o espaçamento permanecer consistente quando as tracks refluem. Prefira gap a espalhar margens em cada filho.
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
Uma pequena matriz de cards
A mesma ideia de um esboço de galeria — tracks iguais mais gap — mas agora você fala Grid, não só flex-wrap.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.cards__item {
min-height: 8rem;
}
fr — divida o espaço livre
A unidade fr divide o espaço livre entre tracks. 2fr 1fr deixa a primeira coluna com o dobro da largura da segunda quando sobra espaço.
.shell {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}
Um hábito Grid calmo
Use Grid para cascas de página bidimensionais e matrizes. Use Flexbox para fileiras unidimensionais. Comece com display: grid, um grid-template-columns simples e gap. Deixe o posicionamento automático profundo, as áreas nomeadas e as tracks Grid responsivas para as próximas lições.
.page {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
.page__main,
.page__rail {
min-width: 0;
}
Experimente você
- Crie um contêiner com
display: grid. - Defina
grid-template-columns: repeat(3, 1fr). - Adicione
gap: 1rementre as tracks. - Teste
2fr 1frpara uma casca main + rail. - Escreva uma frase: quando você ainda escolheria Flexbox?
Erros comuns
- Colocar
display: gridem todo elemento sem necessidade de layout - Esperar que só o wrap do Flexbox substitua um Grid 2D de verdade
- Pular
gape brigar com margens dos filhos para sempre - Pular para áreas nomeadas antes que as tracks básicas pareçam naturais
- Montar cascas de página inteiras com float quando o Grid encaixa melhor
Resumo
- CSS Grid é bidimensional: linhas e colunas juntas
display: gridtransforma filhos em itens de gradegrid-template-columns(e depois linhas) define tracksgapefrmantêm canaletas e espaço livre calmos- Lições mais profundas de contêiner, item, área e Grid responsivo vêm a seguir
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo