CSS: Contêiner Grid CSS

Última atualização: 2026-10-13

CSS Grid é um poderoso sistema de layout bidimensional que permite controlar linhas e colunas simultaneamente.

Propriedades nesta seção: grid-template-columns grid-template-rows gap grid-template-areas

1. Propriedades do Contêiner Grid

(1) Referência Rápida

Propriedade	Valores	Finalidade
`display: grid`	—	Cria contêiner grid
`grid-template-columns`	`100px 1fr 2fr`, `repeat(3, 1fr)`	Definições de colunas
`grid-template-rows`	`100px auto`, `repeat(3, 100px)`	Definições de linhas
`gap`	`10px`, `10px 20px`	Espaço entre itens
`grid-template-areas`	`"header header" "main aside"`	Áreas nomeadas do grid

2. Unidade fr

A unidade fr distribui espaço restante proporcionalmente:

▶ Exemplo

▶ Experimente

3. repeat()

A função repeat() reduz repetição:

▶ Exemplo

▶ Experimente

4. minmax() + auto-fill/auto-fit

Cria grids responsivos que ajustam automaticamente a contagem de colunas:

▶ Exemplo

▶ Experimente

auto-fill vs auto-fit:

auto-fill: Cria tantas colunas quantas cabem, mesmo que vazias
auto-fit: Igual ao auto-fill, mas colapsa colunas vazias

5. grid-template-areas

Define layout com áreas nomeadas:

▶ Exemplo

▶ Experimente

Propriedades nesta seção: grid-template-columns grid-template-rows gap grid-template-areas

❓ Perguntas Frequentes

P Como escolher entre Grid e Flexbox?

R Unidimensional (linha ou coluna única) usa Flexbox, bidimensional (controle simultâneo de linha e coluna) usa Grid. A maioria das páginas usa ambos: Grid para esqueleto geral da página, Flexbox para arranjos locais. Usar ambos em uma página é completamente normal.

P Qual é a diferença entre unidades fr e porcentagens?

R fr distribui espaço restante, porcentagens distribuem largura total. Com gap, fr deduz automaticamente o gap antes de calcular proporções, porcentagens não. 1fr 1fr 1fr com gap ainda é perfeitamente terços, enquanto 33.33% 33.33% 33.33% transborda.

P Como usar grid-template-areas?

R Defina layout com áreas nomeadas: grid-template-areas: "header header" "sidebar main" "footer footer"; depois atribua filhos com grid-area: header. Para mudar layout, apenas ajuste o template de string — não é preciso reposicionar filhos.

📖 Resumo

Grid é um poderoso sistema de layout bidimensional
Defina estrutura do grid com grid-template-columns e grid-template-rows
Use unidade fr para distribuição proporcional de espaço
Crie grids flexíveis com repeat(), minmax()
gap define espaçamento; auto-fill/auto-fit com minmax cria grids verdadeiramente responsivos

📝 Exercícios

Básico

Crie um contêiner grid 3×3, cada célula 100px×100px, gap 10px.
Use unidade 1fr para um layout "duas colunas" (esquerda 1fr, direita 3fr).

Intermediário

Crie um grid de cards auto-adaptativo com repeat(auto-fill, minmax(150px, 1fr)) — redimensione o navegador para ver colunas mudarem.
Crie um layout "clássico de três linhas duas colunas": cabeçalho (abrangendo duas colunas), menu esquerdo, conteúdo direito, rodapé (abrangendo duas colunas).

Desafio

Crie uma galeria de imagens responsiva: desktop 4 colunas, tablet 2 colunas, mobile 1 coluna, usando auto-fill + minmax.
Use grid-template-areas para um layout completo de blog (cabeçalho, navegação, conteúdo principal, barra lateral, rodapé).

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós