CSS Grid: Guia Completo de Layouts com Grid

O Que E CSS Grid

CSS Grid e um sistema de layout bidimensional nativo do CSS. Diferente do Flexbox (unidimensional — linha ou coluna), o Grid controla linhas e colunas simultaneamente, permitindo layouts complexos que antes exigiam frameworks como Bootstrap.

Com Grid, voce define a estrutura do layout no container pai e posiciona os filhos nas celulas da grade. O resultado e um codigo mais limpo, semantico e facil de manter que layouts baseados em floats ou frameworks CSS.

Conceitos Basicos

O container Grid e definido com display: grid. As colunas sao definidas com grid-template-columns e as linhas com grid-template-rows. A unidade fr (fraction) distribui o espaco proporcionalmente.

grid-template-columns: 1fr 2fr 1fr cria tres colunas onde a do meio e o dobro das laterais. gap define o espacamento entre celulas — substituindo o antigo grid-gap.

Itens podem ocupar multiplas celulas com grid-column: span 2 ou serem posicionados explicitamente com grid-column: 1 / 3.

Areas Nomeadas

Grid Template Areas permite nomear regioes do layout de forma visual e intuitiva. Voce define um mapa ASCII do layout e atribui cada area a um elemento. Isso torna o codigo extremamente legivel — voce ve o layout no proprio CSS.

Essa tecnica e excelente para layouts de pagina completa com header, sidebar, conteudo principal e footer. Reorganizar o layout para mobile e tao simples quanto redefinir o mapa de areas.

Grid Responsivo

A funcao minmax() permite criar grids que se adaptam automaticamente sem media queries. grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) cria quantas colunas couberem com minimo de 250px cada — responsivo nativo.

Para layouts mais complexos, combine Grid com media queries para reorganizar areas em diferentes breakpoints.

Gerador de CSS Grid

Nosso Gerador de CSS Grid permite criar layouts visualmente com controles de colunas, linhas e areas. Ajuste o grid e copie o codigo CSS gerado — gratis e sem cadastro.