Aula 15 — CSS Grid: fundamentos

Enquanto o Flexbox organiza elementos em uma dimensão (linha ou coluna), o CSS Grid organiza em duas dimensões ao mesmo tempo: linhas e colunas.

Ele é ideal para estruturar páginas inteiras e áreas complexas.

O que é CSS Grid?

CSS Grid é um sistema de layout que permite criar grades (grids) com controle total sobre linhas, colunas e áreas.

• Layout bidimensional
• Controle preciso de espaçamento
• Menos gambiarras

Ativando o Grid

Para usar o Grid, definimos display: grid no elemento pai.

 .container { display: grid; } 

A partir disso, os filhos passam a ser itens de grid.

Definindo colunas — grid-template-columns

Essa propriedade define quantas colunas a grade terá e seus tamanhos.

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

Nesse exemplo:

• 1ª coluna fixa (200px)
• 2ª e 3ª colunas flexíveis (fr)

O código vai gerar um elemento como a imagem abaixo:

Nesta estrutura:

Coluna Azul (200px): Ela nunca mudará de tamanho, independente da largura da tela.

Colunas Verde e Laranja (1fr): Elas são dinâmicas. Se você aumentar o navegador, elas crescerão juntas para ocupar o espaço que a coluna azul "deixou sobrar".

Gap: Espaço vazio de 10px entre elas apenas para facilitar a identificação.

Definindo linhas — grid-template-rows

Também podemos definir a altura das linhas.

 .container { display: grid; grid-template-rows: auto 1fr auto; } 

Muito comum para:

• Cabeçalho
• Conteúdo
• Rodapé

As linhas geradas serão assim:

Espaçamento entre células — gap

O gap define o espaço entre linhas e colunas.

 .container { display: grid; gap: 16px; } 

Unidade fr

A unidade fr representa uma fração do espaço disponível.

 .container { grid-template-columns: 1fr 2fr; } 

Nesse caso:

• A segunda coluna ocupa o dobro da primeira

Exemplo simples de grid

 <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> 

 .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } 

O Grid distribui os itens automaticamente nas células.

Grid vs Flexbox

• Grid → layout bidimensional (páginas)
• Flexbox → layout unidimensional (componentes)

Na próxima aula, vamos usar o CSS Grid na prática, montando layouts modernos completos 🧩✨