CSS Grid

Tempo de leitura: 4 minutos

CSS Grid: O CSS Grid Layout é o sistema de layout mais avançado do CSS. Diferente do Flexbox (que organiza elementos em uma única dimensão — linha ou coluna), o Grid permite que você organize e posicione elementos em duas dimensões simultâneas (linhas e colunas).

Essa capacidade bidimensional elimina a necessidade de hacks antigos (como float) e oferece uma maneira robusta e intuitiva de criar layouts de páginas inteiras, complexos e totalmente responsivos.

Neste artigo, vamos mergulhar nas propriedades essenciais do Grid, separando-as didaticamente entre as regras aplicadas ao Container (a grade) e as regras aplicadas aos Itens (os filhos da grade).

1. O Grid Container: Definindo a Grade (Pai)

Para iniciar o Grid, você deve aplicar display: grid ao elemento pai, tornando-o um Grid Container. Em seguida, você define a estrutura de linhas e colunas.

A. Estrutura da Grade

Propriedade	Função	Valores Comuns
`display: grid`	Define o elemento como um container de grade.	`grid`
`grid-template-columns`	Define a largura das colunas e o número de colunas.	`1fr 1fr 1fr` (três colunas iguais)
`grid-template-rows`	Define a altura das linhas e o número de linhas.	`100px auto 1fr` (fixa, automática, flexível)
`gap` (ou `grid-gap`)	Adiciona espaçamento entre linhas e colunas (o gutter).	`10px` (para ambos); `10px 20px` (linha, coluna)

🔑 A Unidade `fr` (Fractional Unit)

A unidade fr é exclusiva do Grid e a chave para layouts flexíveis.

1fr representa uma fração igual do espaço disponível no container.
Exemplo: grid-template-columns: 2fr 1fr; cria duas colunas. A primeira coluna ocupa o dobro do espaço da segunda (proporção 2:1).

🛠️ Funções Avançadas

Função	Uso	Exemplo
`repeat()`	Simplifica a criação de colunas/linhas repetidas.	`repeat(5, 1fr)` (cinco colunas de 1fr)
`minmax()`	Define um tamanho mínimo e um tamanho máximo para uma trilha (ótimo para responsividade).	`minmax(200px, 1fr)` (mínimo 200px, mas pode expandir até 1fr)

B. Layout por Áreas Nomeadas

A propriedade grid-template-areas permite que você visualize e desenhe seu layout diretamente no CSS, atribuindo nomes lógicos a células ou grupos de células:

CSS

.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav    content  aside"
        "footer footer footer";
}
/* Uma célula vazia é representada por um ponto (.) */

2. Grid Items: Posicionando e Span (Filhos)

Os elementos filhos diretos do Grid Container são chamados de Grid Items. Eles são posicionados na grade de duas maneiras principais: por linhas/colunas ou por áreas nomeadas.

A. Posicionamento por Linhas e Colunas (Numérico)

Você pode fazer um item abranger várias trilhas usando números de linha:

Propriedade	Sintaxe	Descrição
`grid-column`	`[start] / [end]`	O item começa na linha vertical `[start]` e termina antes da linha vertical `[end]`.
`grid-row`	`[start] / [end]`	O item começa na linha horizontal `[start]` e termina antes da linha horizontal `[end]`.
`span`	`span [count]`	Faz o item ocupar `[count]` número de trilhas.

Exemplo:

CSS

.item-largo {
    /* Começa na linha 1 e ocupa 3 colunas (vai até a linha 4) */
    grid-column: 1 / span 3;
    /* Ou, mais explícito: grid-column: 1 / 4; */
}

B. Posicionamento por Áreas Nomeadas

Se você usou grid-template-areas, atribua o nome da área ao item:

CSS

.menu-principal {
    grid-area: nav; /* O item ocupará toda a área chamada 'nav' */
}

3. Vantagens do CSS Grid

O Grid é o pilar dos layouts modernos por causa de sua capacidade de:

Controle Bidimensional: Gerenciar linhas e colunas simultaneamente sem depender da ordem do HTML.
Layouts Complexos: Criar rapidamente o esqueleto principal de uma página (cabeçalho, barra lateral, conteúdo) com alta previsibilidade.
Responsividade: A unidade fr e a função minmax() simplificam a adaptação a diferentes tamanhos de tela.

✅ Conclusão CSS Grid

O CSS Grid Layout não é apenas uma ferramenta, é uma nova filosofia de layout. Ao definir a estrutura de sua grade no Container (grid-template-columns, grid-template-rows) e posicionar seus Itens com clareza (grid-area ou grid-column), você transforma o layout de uma tarefa de cálculo complexo para um simples exercício de design visual.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: