Grid

A parede de cartazes do Belavista é duas dimensões: linhas e colunas. CSS Grid coloca itens em células, áreas nomeadas e trilhas com fr.

O exemplo deste capítulo é 31-grid, no pacote que acompanha o volume. Mude grid-template-columns, preveja quantas colunas aparecem, recarregue e confira.

O que você vai aprender

• Criar um grid container.
• Definir trilhas com px, fr, minmax e repeat.
• Usar gap e auto-placement.
• Nomear áreas com grid-template-areas.
• Diferenciar Grid de Flexbox na prática.

Termos rápidos

Linhas de grade (grid lines), trilhas (tracks: linhas/colunas), célula, área, gap. O container é o pai com display: grid; os filhos diretos são itens.

.mural {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}

fr, minmax e repeat

1fr é uma fração do espaço livre. minmax(12rem, 1fr) não deixa a coluna menor que 12rem. auto-fit / auto-fill montam quantas colunas couberem.

.pagina {
  display: grid;
  grid-template-columns: 12rem 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "nav nav"
    "side main"
    "foot foot";
  min-height: 100vh;
  gap: 1rem;
}

.pagina nav { grid-area: nav; }
.pagina aside { grid-area: side; }
.pagina main { grid-area: main; }
.pagina footer { grid-area: foot; }

HTML enxuto

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Grid — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="mural">
      <article>Cartaz 1</article>
      <article>Cartaz 2</article>
      <article>Cartaz 3</article>
      <article>Cartaz 4</article>
    </div>
  </body>
</html>

Grid versus Flex

Use Grid quando a estrutura é matriz (cabeçalho + lateral + miolo). Use Flex quando a pergunta é “reparta estes itens nesta linha/coluna”. Os dois convivem: grid na página, flex no card.

Erro comum: fixar três colunas em px e esquecer telas estreitas. Prefira auto-fit + minmax no mural de cartazes.

Critério para avançar

Você avança se: monta um mural responsivo sem media query obrigatória; nomeia uma área; explica 1fr.

Atividades

1. O que repeat(3, 1fr) faz?
2. gap soma dentro ou fora das trilhas de conteúdo?
3. Filho de filho do grid é item de grid?

Respostas comentadas

1. Três colunas (ou linhas, conforme a propriedade) com frações iguais do espaço livre.
2. O gap é o vão entre trilhas; não faz parte da medida 1fr da mesma forma que o conteúdo — ele reduz o espaço a distribuir.
3. Não. Só filhos diretos do container são grid items. Netos participam do fluxo dentro da célula.