CSS Grid Layout: Guia Completo

Antes do CSS Grid Layout, montar layouts na web significava recorrer a floats, tabelas ou combinações de Flexbox aninhado. O Grid é o primeiro sistema de layout do CSS pensado para duas dimensões ao mesmo tempo: linhas e colunas. Com ele, o container define a estrutura da página e os itens apenas dizem onde querem ficar.

Conceitos básicos

Alguns termos aparecem o tempo todo ao trabalhar com Grid:

Grid container: o elemento com display: grid.
Grid items: os filhos diretos do container.
Grid lines: as linhas divisórias da grade, numeradas a partir de 1 (e de -1 a partir do final).
Tracks: o espaço entre duas linhas, ou seja, uma coluna ou uma linha da grade.
Cell e area: uma célula é a interseção de uma linha com uma coluna; uma área é um retângulo formado por uma ou mais células.

Criando o primeiro grid

Basta declarar o container e definir as colunas. A unidade fr (fração) divide o espaço livre disponível entre as tracks:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

<div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>

O container terá três colunas de tamanhos iguais com 16px de espaçamento. O quarto item não cabe na primeira linha, então o Grid cria automaticamente uma segunda linha para ele.

A unidade fr e a função repeat()

É possível misturar fr com tamanhos fixos. O espaço fixo é reservado primeiro e o restante é dividido pelas frações:

.container {
    display: grid;
    /* sidebar fixa de 240px e conteúdo ocupando o resto */
    grid-template-columns: 240px 1fr;
}

.galeria {
    display: grid;
    /* equivalente a 1fr 1fr 1fr 1fr */
    grid-template-columns: repeat(4, 1fr);
}

Posicionando itens pelas linhas

Com grid-column e grid-row você indica em qual linha o item começa e em qual termina. A palavra-chave span define quantas tracks o item deve ocupar:

.destaque {
    grid-column: 1 / 3;   /* da linha 1 até a linha 3 (ocupa 2 colunas) */
    grid-row: 1 / span 2; /* começa na linha 1 e ocupa 2 linhas */
}

.largura-total {
    grid-column: 1 / -1;  /* da primeira à última linha do grid */
}

Layouts com grid-template-areas

Uma das formas mais legíveis de usar Grid é nomear as áreas do layout. O CSS passa a funcionar quase como um desenho da página:

.pagina {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
    min-height: 100vh;
}

.pagina header { grid-area: header; }
.pagina aside  { grid-area: sidebar; }
.pagina main   { grid-area: main; }
.pagina footer { grid-area: footer; }

Para adaptar o layout em telas menores, basta redesenhar as áreas dentro de uma media query, sem mexer no HTML:

@media (max-width: 768px) {
    .pagina {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "footer";
    }
}

Grid responsivo sem media queries

Combinando repeat(), auto-fit e minmax(), o número de colunas se ajusta sozinho à largura disponível:

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 24px;
}

Cada coluna tem no mínimo 250px e no máximo uma fração do espaço livre. O min(250px, 100%) evita que o card estoure o container em telas muito estreitas.

A diferença entre auto-fit e auto-fill aparece quando há poucos itens: auto-fill mantém as colunas vazias reservadas, enquanto auto-fit as colapsa e deixa os itens existentes esticarem para ocupar a linha toda.

Alinhamento

O Grid usa as mesmas propriedades de alinhamento do Box Alignment, aplicadas em dois eixos:

justify-items / align-items: alinham o conteúdo de todos os itens dentro das suas células (eixo horizontal e vertical).
justify-content / align-content: alinham a grade inteira dentro do container quando sobra espaço.
justify-self / align-self: sobrescrevem o alinhamento de um item específico.
place-items e place-self: atalhos para definir os dois eixos de uma vez.

/* centralizar qualquer conteúdo em duas linhas */
.centralizar {
    display: grid;
    place-items: center;
}

Grid implícito e grid-auto-flow

Quando há mais itens do que células definidas, o navegador cria tracks extras automaticamente. O tamanho delas é controlado por grid-auto-rows e grid-auto-columns, e a ordem de preenchimento por grid-auto-flow:

.mosaico {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 150px;
    grid-auto-flow: dense; /* preenche buracos deixados por itens maiores */
}

.mosaico .grande {
    grid-column: span 2;
    grid-row: span 2;
}

Com dense, itens menores sobem para ocupar espaços vazios. Use com cuidado: a ordem visual pode deixar de seguir a ordem do HTML, o que afeta a navegação por teclado e leitores de tela.

Subgrid

Por padrão, um grid aninhado não conhece as tracks do grid pai. Com subgrid, o filho herda as linhas ou colunas do pai, mantendo elementos de cards diferentes perfeitamente alinhados:

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid; /* título, texto e botão alinhados entre os cards */
}

Grid ou Flexbox?

Os dois não competem, se complementam:

Grid é ideal quando você quer controlar linhas e colunas ao mesmo tempo, ou seja, o layout é definido pelo container (estrutura de página, galerias, dashboards).
Flexbox funciona melhor em uma dimensão, quando o tamanho do conteúdo deve ditar a distribuição (barras de navegação, grupos de botões, alinhamento de itens em linha).

Na prática, é comum usar Grid para a estrutura geral e Flexbox dentro dos componentes.

Dica: inspecione o grid no navegador

Chrome, Edge e Firefox têm ferramentas de DevTools que desenham as linhas, números e nomes das áreas sobre a página. Basta clicar no selo grid ao lado do elemento no painel de elementos, o que ajuda muito a entender por que um item foi parar em determinado lugar.

Compatibilidade

O CSS Grid é suportado por todos os navegadores modernos há anos, e o subgrid está disponível no Chrome, Edge, Firefox e Safari desde 2023, então pode ser usado com segurança em produção.

caniuse

Conclusão

O CSS Grid Layout mudou a forma de construir páginas: com poucas linhas de CSS é possível descrever layouts complexos, responsivos e fáceis de manter. Comece com grid-template-columns e gap, evolua para grid-template-areas e minmax(), e use Flexbox onde ele faz mais sentido.