Itens Grid CSS
Grid Container guiou o pai — tracks, gap e padrões da célula. Os itens grid respondem a outra pergunta: como cada filho reivindica linhas, cobre tracks e substitui o alinhamento dentro da sua célula? Domine a colocação por linhas antes das áreas nomeadas.
Uma caixa de ferramentas de itens grid
📊 Itens grid num relance
| Propriedade | Trabalho do dia a dia |
|---|---|
grid-column |
Define as linhas de início/fim de coluna do item (atalho) |
grid-row |
Define as linhas de início/fim de linha do item (atalho) |
span |
Estica o item por N tracks a partir da linha de início |
justify-self |
Substitui justify-items para um item (eixo inline) |
align-self |
Substitui align-items para um item (eixo block) |
place-self |
Atalho para align-self + justify-self |
As linhas da grid são numeradas a partir da borda inicial. Um item que começa na linha 1 e termina na 3 cobre duas tracks de coluna. Pense primeiro em linhas; as áreas nomeadas vêm depois.
grid-column — sentar nas linhas de coluna
grid-column: start / end fixa um filho entre linhas de coluna. Uma barra lateral costuma ficar na primeira track; o painel principal fica com o resto.
.board {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}
.board__aside {
grid-column: 1 / 2;
}
.board__main {
grid-column: 2 / 3;
}
span — esticar pelas tracks
span conta tracks a partir da linha de início. Um hero de largura total num tabuleiro de três colunas costuma usar grid-column: 1 / span 3.
.hero {
grid-column: 1 / span 3;
}
grid-row — sentar nas linhas de linha
A mesma ideia no eixo block. Fixe um banner na faixa superior, ou deixe um cartão alto ocupar duas tracks de linha com span.
.banner {
grid-row: 1 / 2;
}
.tall-card {
grid-row: 2 / span 2;
}
Coluna e linha juntas
Combine as duas quando um filho precisa de um retângulo claro — por exemplo um azulejo em destaque que cobre duas colunas e uma linha.
.feature {
grid-column: 1 / span 2;
grid-row: 1 / 2;
}
place-self — um item, outro alinhamento de célula
Substitua justify-items / align-items do contentor para um único filho. place-self: center é um atalho calmo quando ambos os eixos devem coincidir.
.board {
display: grid;
justify-items: stretch;
align-items: stretch;
gap: 0.75rem;
}
.board .badge {
place-self: center;
}
Um hábito calmo de item grid
Coloque primeiro com linhas de coluna e de linha, use span quando um filho cobrir várias tracks, depois afine o alinhamento pontual com place-self. Mantenha a ordem do DOM sensata — evite truques de order que embaralhem o foco do teclado. Deixe as áreas de modelo nomeadas para Grid Areas.
.shell__hero {
grid-column: 1 / -1;
}
.shell__aside {
grid-column: 1 / 2;
align-self: start;
}
.shell__main {
grid-column: 2 / 3;
}
Experimente você
- Monte um tabuleiro de duas colunas; coloque aside em
grid-column: 1 / 2e main em2 / 3. - Adicione um hero de três colunas com
grid-column: 1 / span 3. - Fixe um banner com
grid-row: 1 / 2. - Estenda um azulejo em destaque por duas colunas e uma linha.
- Centre um badge com
place-self: centere anote as áreas nomeadas para a seguir.
Erros comuns
- Por
spanou números de linha no contentor em vez de num item - Esquecer que as linhas começam em 1 e contar tracks como se fossem linhas
- Misturar colocação de item com o packing
justify-contentno pai - Saltar para
grid-template-areasnomeadas antes de dominar as linhas - Reordenar com
ordere partir a ordem de tab/fonte
Resumo
- Itens grid controlam colocação por linhas, span e alinhamento por item
grid-column/grid-rowfixam linhas de início e fimspanestica pelas tracks a partir de uma linha de inícioplace-self(e props self) substituem o alinhamento de célula para um filho- Áreas de modelo nomeadas vêm na lição Grid Areas 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