Contentor Grid CSS
A intro de Grid transformou pais em grelhas. Esta lição fica no contentor: defina pistas, ponha gap, alinhe itens nas células e empacote a grelha quando sobrar espaço livre. O span de itens e as áreas nomeadas esperam por Grid Items e Grid Areas.
Uma caixa de ferramentas do contentor grid
📊 Contentor grid num relance
| Propriedade | Trabalho do dia a dia |
|---|---|
grid-template-columns |
Define os tamanhos das pistas de coluna |
grid-template-rows |
Define os tamanhos das pistas de linha |
gap |
Calhas entre pistas |
justify-items / align-items |
Alinha cada item na sua célula (eixo inline / block) |
justify-content / align-content |
Posiciona toda a grelha quando é menor que o contentor |
grid-auto-flow |
Controla a ordem de auto-colocação (row ou column) |
Desenhe primeiro as pistas. Depois decida como as células alinham o conteúdo e só então como o espaço sobrante à volta de toda a grelha deve comportar-se.
Pistas de modelo — colunas e linhas
grid-template-columns e grid-template-rows esboçam a grelha. Misture fr, comprimentos e repeat() para quadros do dia a dia.
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
min-height: 16rem;
}
gap — manter calhas honestas
gap (ou row-gap / column-gap) espaça pistas sem truques de margin em cada filho.
.board {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem 1.25rem;
}
justify-items e align-items — dentro da célula
Estas alinham cada item na sua célula. justify-items no eixo inline; align-items no eixo block. Não as confunda com o packing do conteúdo.
.board {
display: grid;
grid-template-columns: repeat(2, 8rem);
justify-items: center;
align-items: center;
gap: 0.75rem;
}
justify-content e align-content — empacotar a grelha
Quando as pistas são menores que o contentor, as propriedades content deslizam ou espaçam toda a grelha. Útil para quadros de ícones que não devem esticar para sempre.
.board {
display: grid;
grid-template-columns: repeat(3, 6rem);
justify-content: space-between;
align-content: start;
gap: 0.5rem;
min-height: 12rem;
}
Um hábito calmo de contentor grid
Primeiro colunas e linhas de modelo, depois gap, depois alinhamento de itens nas células, depois packing content se sobrar espaço. Olhe para grid-auto-flow quando a ordem de auto-colocação importa. Deixe span, números de linha e áreas nomeadas para as próximas lições Grid.
.shell {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 1fr;
gap: 1.25rem;
justify-items: stretch;
align-items: stretch;
}
Experimente você
- Faça um quadro com três colunas
1fre linhasauto 1fr auto. - Adicione
gap: 1rem. - Centre o conteúdo das células com
justify-itemsealign-items. - Empacote um quadro de pistas fixas com
justify-content: space-between. - Anote uma propriedade para guardar para Grid Items ou Grid Areas.
Erros comuns
- Misturar
justify-items(dentro das células) comjustify-content(toda a grelha) - Pôr
spande item ou nomes de área no contentor cedo demais - Definir só colunas e estranhar alturas de linha aleatórias
- Trazer hábitos de
growdo Flex para o contentor grid - Tratar esta lição como o módulo Areas completo
Resumo
- As props do contentor grid definem pistas, calhas e alinhamento
grid-template-columns/rowsesboçam a grelhajustify-items/align-itemsalinham conteúdo nas célulasjustify-content/align-contentempacotam a grelha no espaço livre- Span de itens e áreas nomeadas vêm nas lições Grid seguintes
🧠 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