Introdução ao CSS Grid

CSS Grid é uma ferramenta de layout para organizar o conteúdo da página em linhas e colunas.

Ele é útil quando você quer criar layouts como grids de cards, dashboards, sidebars, headers, footers e estruturas simples de página.

Por que CSS Grid é útil

O fluxo normal do documento empilha elementos de bloco de cima para baixo.

Flexbox ajuda quando você precisa organizar elementos em uma direção principal: uma linha ou uma coluna.

CSS Grid ajuda quando você precisa controlar duas direções ao mesmo tempo: linhas e colunas.

Por exemplo, uma página com header, sidebar, área principal de conteúdo e footer é mais fácil de descrever com Grid do que com margins, floats ou positioning.

O que é CSS Grid

CSS Grid é um sistema de layout bidimensional.

Isso significa que ele pode controlar:

• colunas da esquerda para a direita
• linhas de cima para baixo

Você pode imaginar Grid como uma tabela invisível desenhada sobre uma parte da sua página. Seus elementos HTML podem ficar dentro das células desse layout.

Grid container e grid items

Para começar a usar CSS Grid, adicione display: grid a um elemento pai.

Esse pai se torna o grid container.

Seus filhos diretos se tornam grid items.

<div class="grid-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

Apenas filhos diretos se tornam grid items. Se um elemento estiver mais aninhado, ele não se torna grid item a menos que seu próprio pai também use display: grid.

Se você não posicionar grid items manualmente, o navegador usa auto-placement. Ele coloca cada grid item na próxima célula disponível, movendo da esquerda para a direita e criando uma nova linha quando necessário.

Criando colunas com grid-template-columns

A propriedade grid-template-columns define o número e a largura das colunas.

CSS Grid costuma usar a unidade fr. fr vem de "fraction" e significa uma fração do espaço disponível.

<div class="column-grid">
  <div>Um</div>
  <div>Dois</div>
  <div>Três</div>
  <div>Quatro</div>
</div>

<style>
  .column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    font-family: Arial, sans-serif;
  }

  .column-grid div {
    padding: 20px;
    text-align: center;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
  }
</style>

Isso cria duas colunas iguais.

Aqui estão três padrões comuns de colunas:

• grid-template-columns: 1fr 1fr; cria duas colunas iguais.
• grid-template-columns: 200px 1fr; cria uma sidebar fixa e uma área de conteúdo flexível.
• grid-template-columns: repeat(3, 1fr); cria três colunas iguais sem escrever 1fr três vezes.

Criando linhas com grid-template-rows

As linhas geralmente são criadas automaticamente conforme você adiciona mais elementos.

Quando você precisa de alturas específicas para as linhas, use grid-template-rows.

<div class="row-grid">
  <div class="top-row">Linha com altura fixa</div>
  <div class="content-row">Linha auto que cresce com o conteúdo</div>
</div>

<style>
  .row-grid {
    display: grid;
    grid-template-rows: 80px auto;
    gap: 12px;
    font-family: Arial, sans-serif;
  }

  .row-grid div {
    padding: 16px;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
  }

  .content-row {
    min-height: 120px;
  }
</style>

Isso cria duas linhas:

• a primeira linha tem 80px de altura
• a segunda linha cresce com base em seu conteúdo

Se você não definir grid-template-rows, Grid ainda cria linhas automaticamente quando os itens precisam de mais espaço.

Usando gap

A propriedade gap cria espaço entre linhas e colunas do grid.

Use gap em vez de adicionar margens a cada grid item.

<div class="gap-grid">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

<style>
  .gap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    font-family: Arial, sans-serif;
  }

  .gap-grid div {
    padding: 20px;
    text-align: center;
    background-color: #fef3c7;
    border: 1px solid #d97706;
  }
</style>

Isso adiciona 20px de espaço entre grid items, mas não ao redor da borda externa do grid.

Exemplo de layout simples com Grid

Este exemplo cria um pequeno layout de página com header, sidebar, área principal de conteúdo e footer.

O header e o footer usam grid-column para se esticar por ambas as colunas. Essa propriedade é explicada logo depois do exemplo.

<div class="page-layout">
  <header class="header">Cabeçalho</header>
  <aside class="sidebar">Barra lateral</aside>
  <main class="main">Conteúdo principal</main>
  <footer class="footer">Rodapé</footer>
</div>

<style>
  .page-layout {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-align: center;
  }

  .header {
    grid-column: 1 / 3;
    padding: 20px;
    background-color: #dbeafe;
  }

  .sidebar {
    padding: 40px 20px;
    background-color: #dcfce7;
  }

  .main {
    padding: 40px 20px;
    background-color: #fef3c7;
  }

  .footer {
    grid-column: 1 / 3;
    padding: 20px;
    background-color: #e5e7eb;
  }
</style>

A sidebar e o conteúdo principal não têm regras de posicionamento manual. Eles são colocados automaticamente nas próximas células disponíveis do grid.

Colocando itens através de colunas

No exemplo acima, o header e o footer se esticam por ambas as colunas.

Isso acontece porque eles usam grid-column.

As colunas do grid são separadas por linhas verticais invisíveis.

Em um grid de duas colunas, existem três linhas verticais:

• a linha 1 é a borda esquerda
• a linha 2 fica entre as duas colunas
• a linha 3 é a borda direita

Então grid-column: 1 / 3; significa: comece na linha 1 e termine na linha 3.

Você também pode ver -1 como linha final.

No Grid, -1 significa a última linha do grid.

<div class="full-width-grid">
  <div class="wide-item">Eu ocupo toda a largura do grid</div>
  <div>Um</div>
  <div>Dois</div>
  <div>Três</div>
</div>

<style>
  .full-width-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    font-family: Arial, sans-serif;
  }

  .full-width-grid div {
    padding: 16px;
    text-align: center;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
  }

  .wide-item {
    grid-column: 1 / -1;
  }
</style>

grid-column: 1 / -1; significa: comece na primeira linha do grid e termine na última linha do grid. Isso faz o item ocupar toda a largura do grid, mesmo se o grid tiver mais de duas colunas.

Grid vs Flexbox

Grid e Flexbox são ferramentas de layout, mas são úteis em situações diferentes.

• Flexbox é melhor para uma direção: uma linha ou uma coluna.
• Grid é melhor para duas direções: linhas e colunas juntas.

Use Flexbox para coisas como links de navegação, botões de toolbar e pequenos grupos de itens.

Use Grid para layouts de página, dashboards, galerias e grids de cards.

Erros comuns de iniciantes

• Colocar display: grid no elemento errado: adicione ao contêiner pai, não aos itens individuais.
• Esperar que elementos aninhados se tornem grid items automaticamente: apenas os filhos diretos do grid container se tornam grid items.
• Esquecer gap: use gap para o espaço entre grid items em vez de adicionar margens a cada item.
• Usar Grid para alinhamento muito simples: se você só precisa centralizar um item ou colocar um ícone ao lado de texto, Flexbox pode ser mais simples.

Mini prática

Escreva CSS para um grid container que:

• crie três colunas iguais
• adicione um gap de 16px entre os itens

Dica: use repeat(3, 1fr).

Quiz curto com respostas

1. Qual propriedade CSS transforma um elemento pai em um grid container?
2. Qual propriedade CSS define o tamanho e o número de colunas?
3. O que gap controla?

Respostas:

1. display: grid
2. grid-template-columns
3. O espaço entre linhas e colunas do grid.

Resposta da mini prática:

Pequeno desafio

Tente criar um layout simples de dashboard.

1. Transforme .dashboard em um grid.
2. Crie duas colunas: 180px 1fr.
3. Adicione um gap de 16px.
4. Faça .top-bar ocupar ambas as colunas.

<div class="dashboard">
  <div class="top-bar">Navegação do dashboard</div>
  <div class="side-menu">Links do menu</div>
  <div class="content-area">Dados principais do dashboard</div>
</div>

<style>
  .dashboard {
    /* 1. Transforme isto em um grid */

    /* 2. Crie duas colunas: 180px e 1fr */

    /* 3. Adicione um gap de 16px */

    font-family: Arial, sans-serif;
  }

  .top-bar {
    /* 4. Faça isto ocupar ambas as colunas */

    padding: 16px;
    color: white;
    background-color: #1f2937;
  }

  .side-menu {
    padding: 20px;
    background-color: #dbeafe;
  }

  .content-area {
    padding: 20px;
    background-color: #fef3c7;
  }
</style>

Uma resposta possível:

Resumo

• CSS Grid cria layouts com linhas e colunas.
• O pai com display: grid é o grid container.
• Os filhos diretos do grid container são grid items.
• grid-template-columns define colunas.
• grid-template-rows define linhas.
• fr divide o espaço disponível em partes flexíveis.
• gap controla o espaço entre linhas e colunas.
• Grid é útil para layouts de página, dashboards, galerias e grids de cards.