Hoe maak je een layout met CSS Grid?

Question

Accepted Answer

**CSS Grid** is een tweedimensionaal layoutsysteem — het bestuurt **rijen en kolommen tegelijkertijd**, anders dan de enkele regel van Flexbox. Je definieert een raster in de container en plaatst items erin.

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

## The fr unit and repeat()

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

`fr` ("fraction") verdeelt beschikbare ruimte — `1fr 2fr` splitst het 1:2. `repeat(3, 1fr)` is verkorte notatie voor drie gelijke tracks.

## Responsief raster ZONDER media queries

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

Deze ene regel maakt een volledig responsief kaartsenraster: elke kolom is minstens `250px`; de browser past **zoveel mogelijk** per rij in en wraps de rest — automatisch van 4 kolommen op desktop naar 1 op mobiel. `auto-fit` + `minmax` is een van Grids meest favoriete patronen.

## Items over cellen plaatsen

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

Items kunnen meerdere rijen/kolommen overspannen, waardoor magazine-achtige layouts mogelijk zijn die met Flexbox lastig zijn.

## Grid vs Flexbox

- **Grid** — 2D layout (rijen *en* kolommen): paginalayout, kaartsenrasters, dashboards.
- **Flexbox** — 1D layout (enkele rij of kolom): navigatiebalken, knoopgroepen, centrering.

Ze werken goed samen — een rastercell kan zelf een flex-container zijn.

## Waarom het belangrijk is

Grid is het krachtigste CSS-layouthulpmiddel — het verwerkt volledige paginalayout's en responsieve kaartsenrasters schoon, zonder geneste-div-hacks.

Het `auto-fit`/`minmax` responsieve patroon alleen al elimineert de behoefte aan veel media queries.