Come si crea un layout con CSS Grid?

Question

Accepted Answer

**CSS Grid** è un sistema di layout bidimensionale — controlla **righe e colonne simultaneamente**, a differenza di Flexbox che lavora su una sola linea. Defini una griglia sul contenitore e posizioni gli elementi al suo interno.

```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 */
}
```

## L'unità fr e repeat()

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

`fr` ("fraction") distribuisce lo spazio disponibile — `1fr 2fr` lo divide in rapporto 1:2. `repeat(3, 1fr)` è la forma abbreviata per tre tracce uguali.

## Grid responsiva SENZA media query

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

Questa singola riga crea una griglia di card completamente responsiva: ogni colonna è larga almeno `250px`; il browser adatta **il maggior numero possibile** di colonne per riga e va a capo per le restanti — passando automaticamente da 4 colonne su desktop a 1 su mobile. `auto-fit` + `minmax` è uno dei pattern più amati di Grid.

## Posizionamento degli elementi su più celle

```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 */
```

Gli elementi possono estendersi su più righe/colonne, permettendo layout in stile rivista che sarebbero complessi con Flexbox.

## Grid vs Flexbox

- **Grid** — layout 2D (righe *e* colonne): layout di pagina, griglie di card, dashboard.
- **Flexbox** — layout 1D (una singola riga o colonna): navbar, gruppi di pulsanti, centratura.

Lavorano bene insieme — una cella della griglia può essere a sua volta un contenitore flex.

## Perché è importante

Grid è lo strumento di layout CSS più potente — gestisce layout di pagina intera e griglie di card responsive in modo pulito, spesso sostituendo hack con div annidati.

Il pattern responsivo `auto-fit`/`minmax` da solo elimina la necessità di molte media query.