CSS Grid: Layout em Duas Dimensões

Flexbox é uma dimensão (linha OU coluna). Grid é duas (linha E coluna ao mesmo tempo). Quando você precisa de um layout tipo "tabela visual" sem ser tabela — cabeçalho, sidebar, conteúdo, aside — Grid é a ferramenta.

Ativando o Grid

.container {
  display: grid;
}

Mesma simplicidade do Flexbox: uma linha e os filhos viram "grid items". A diferença é que o Grid tem duas dimensões pra cuidar.

O container define as linhas e colunas

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;   /* 3 colunas */
  grid-template-rows: auto 1fr auto;        /* 3 linhas */
  gap: 16px;
}

fr = "fração do espaço disponível" (similar a flex: 1, mas no Grid). O 1fr no meio cresce e ocupa o espaço que sobrar.

<div class="container">
  <header>Topo</header>      <!-- linha 1, todas as colunas -->
  <aside>Sidebar</aside>     <!-- linha 2, coluna 1 -->
  <main>Conteúdo</main>      <!-- linha 2, coluna 2 -->
  <aside>Aside</aside>       <!-- linha 2, coluna 3 -->
  <footer>Rodapé</footer>    <!-- linha 3, todas as colunas -->
</div>

O navegador organiza automaticamente os filhos nas células. Você também pode posicionar manualmente com grid-column e grid-row (próximo nó).

Grid vs Flexbox — quando usar cada um

Na prática, Flexbox e Grid coexistem: Grid pro layout macro da página, Flexbox pros componentes dentro (navbar, grupo de botões, lista de cards).

grid-template-areas — layout visual

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  gap: 16px;
}

header  { grid-area: header; }
aside   { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }

Lê como um mapa: "header ocupa a primeira linha toda, sidebar e main dividem a segunda, footer a terceira". Mais legível que grid-row/grid-column numérico (você vê o layout no próprio CSS).

Container e itens (de novo)

Mesma lógica do Flexbox: container define o grupo, itens definem a si mesmos. Próximos dois nós aprofundam:

• grid-container: grid-template-columns, grid-template-rows, gap, grid-template-areas, alinhamento.

• grid-itens: grid-column, grid-row, grid-area, align-self, justify-self.

• grid-casos: padrões clássicos (galeria, layout de página, auto-fit responsivo).

• Grid é layout em duas dimensões (linhas e colunas).

• display: grid ativa. grid-template-columns e grid-template-rows definem a estrutura.

• fr é a fração do espaço disponível (cresce como flex: 1).

• grid-template-areas permite desenhar o layout visualmente.

Dica: Grid Garden é o Flexbox Froggy do Grid. Resolve em 20 minutos e solidifica grid-template-areas e posicionamento numérico. Mesma recomendação: jogue antes de seguir.

No próximo, as propriedades do container que definem a arquitetura do grid.