Como você cria um layout com CSS Grid?

Question

Accepted Answer

**CSS Grid** é um sistema de layout bidimensional — controla **linhas e colunas simultaneamente**, diferentemente da linha única do Flexbox. Você define uma grade no contêiner e coloca itens nele.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## Por que isso importa

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr` ("fraction") distribui espaço disponível — `1fr 2fr` o divide 1:2. `repeat(3, 1fr)` é abreviação para três faixas iguais.

## Grade responsiva SEM media queries

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

Esta linha cria uma grade de cartões totalmente responsiva: cada coluna tem pelo menos `250px`; o navegador encaixa **o máximo possível** por linha e envolve o resto — passando automaticamente de 4 colunas no desktop para 1 no celular. `auto-fit` + `minmax` é um dos padrões mais amados do Grid.

## Posicionando itens em células

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

Os itens podem se estender por várias linhas/colunas, permitindo layouts no estilo revista que são difíceis com Flexbox.

## Grid vs Flexbox

- **Grid** — Layout 2D (linhas *e* colunas): layouts de página, grades de cartões, painéis.
- **Flexbox** — Layout 1D (uma única linha ou coluna): barras de navegação, grupos de botões, centralização.

Eles se compõem bem — uma célula da grade pode ser ela mesma um contêiner flex.

## Por que isso importa

Grid é a ferramenta de layout CSS mais poderosa — lida com layouts de página inteira e grades de cartões responsivas com elegância, muitas vezes substituindo gambiarras de divs aninhados.

O padrão responsivo `auto-fit`/`minmax` sozinho remove a necessidade de muitas media queries.