CSS Grid Layout Cheat Sheet

Define um container como grid.

display: grid;

Define 3 colunas de larguras iguais.

grid-template-columns: repeat(3, 1fr);

Define a altura das linhas.

grid-template-rows: auto 1fr auto;

Define o espaçamento entre linhas e colunas.

gap: 20px;

Nomeia um item para uso em grid-template-areas.

grid-area: header;

Faz o item ocupar da coluna 1 até a 2.

grid-column: 1 / span 2;

Alinha os itens horizontal e verticalmente ao mesmo tempo.

place-items: center;

Define o layout visual usando áreas nomeadas.

grid-template-areas: "h h" "m s" "f f";