Todas as propriedades comuns do CSS grid, agrupadas por onde se aplicam: no contentor, no item e nas unidades de dimensão. Cada linha associa a propriedade aos seus valores comuns.
O Grid dispõe os elementos em duas dimensões: linhas e colunas ao mesmo tempo. Defina display: grid no elemento pai, declare as faixas com grid-template-columns e grid-template-rows e coloque os filhos em células. Use grid para esquemas de página e de cartões; use flexbox para barras unidimensionais. Os dois compõem-se livremente.
Tabela de referência · 33 entradas
CSS GridExplained
33 of 33 rows
Contentor
grid | inline-grid
Torna o elemento num contentor grid.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Define as colunas e as suas larguras.
auto 1fr auto
Define as linhas e as suas alturas.
[main-start] 1fr [main-end]
Dá nomes às linhas do grid num modelo e coloca os itens por esses nomes.
1rem | 8px 16px
Espaço entre linhas e colunas.
"header header" "nav main"
Dá nomes às células para uma colocação legível.
"head head" 64px "nav main" 1fr / 200px 1fr
Define linhas, colunas e áreas num só atalho.
repeat(2, 1fr) / auto-flow 80px
Define todas as propriedades de faixa e o grid-auto-flow numa só declaração.
minmax(80px, auto)
Define a altura das linhas que o modelo não define.
120px | minmax(0, 1fr)
Define a largura das colunas que o modelo não define.
row | column | row dense
Escolhe o eixo para os itens não colocados; dense preenche as lacunas anteriores.
start | center | end | stretch
Alinha cada item dentro da sua célula ao longo do eixo da linha.
start | center | end | stretch
Alinha cada item dentro da sua célula ao longo do eixo da coluna.
center | start end
Define align-items e justify-items numa só declaração.
start | center | space-between
Alinha a grelha de faixas dentro do contentor ao longo do eixo da linha.
start | center | space-between
Alinha a grelha de faixas dentro do contentor ao longo do eixo da coluna.
center | end start
Define align-content e justify-content numa só declaração.
Item
1 / 3 | span 2
Coloca ou estende um item ao longo das colunas.
1 / 2 | span 3
Coloca ou estende um item ao longo das linhas.
grid-column: 2 / -1
Conta as linhas a partir do fim da grelha; -1 é a última linha.
header | 1 / 1 / 2 / 3
Nomeia ou coloca totalmente um item num só atalho.
start | center | end | stretch
Alinha este único item dentro da sua célula ao longo do eixo da linha.
start | center | end | stretch
Alinha este único item dentro da sua célula ao longo do eixo da coluna.
center | start end
Define align-self e justify-self numa só declaração.
Unidades de dimensão
1fr | 2fr
Uma fração do espaço livre na faixa.
auto | 1fr auto
Dimensiona uma faixa pelo seu conteúdo; o alinhamento pode esticá-la.
min-content | max-content
Dimensiona uma faixa pelo seu conteúdo mais pequeno ou mais largo.
fit-content(180px)
Dimensiona uma faixa pelo conteúdo, mas nunca além do limite dado.
minmax(200px, 1fr)
Limita uma faixa entre um mínimo e um máximo.
repeat(4, 1fr)
Repete um padrão de faixas sem escrever cada uma.
repeat(auto-fit, minmax(120px, 1fr))
Acrescenta tantas faixas quantas couberem; auto-fit colapsa as vazias.
grid-template-columns: subgrid
Faz uma grelha aninhada partilhar as faixas e os nomes de linhas do pai.
grid-template-rows: masonry
Experimental: empaçota os itens em colunas por altura, em vez de linhas fixas.