Hoe werken grid-template-areas en responsive grids?

Question

IT Interview Practice · Accepted Answer

`grid-template-areas` laat je een grid **visueel** opmaken door regio's een naam te geven, waardoor complexe pagina-layouts leesbaar en gemakkelijk responsief herschikbaar worden.

## Benoemde gebieden definiëren

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* row 1: header spans both columns */
    "sidebar main"     /* row 2: sidebar | main */
    "footer  footer";  /* row 3: footer spans both */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* assign each element to a named area */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

De ASCII-art `grid-template-areas` *is* de layout — je kunt de structuur in één oogopslag zien, en het herhalen van een naam maakt een regio over meerdere cellen verspreid.

## Herschikking voor mobiel — gewoon de kaart opnieuw tekenen

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* single column */
    grid-template-areas:
      "header"
      "main"      /* main now ABOVE sidebar on mobile */
      "sidebar"
      "footer";
  }
}
```

Om de hele layout voor mobiel te wijzigen, schrijf je simpelweg de gebiedskaart opnieuw — de HTML en de `grid-area` toewijzingen blijven identiek. Dit is veel netter dan elk element afzonderlijk te repositioneren.

## Waarom dit krachtig is

- **Zelf-documenterend** — de CSS spiegelt visueel de weergegeven layout.
- **Losgekoppeld van bronvolgorde** — elementen kunnen overal geplaatst worden ongeacht de HTML-volgorde (goed voor het plaatsen van `main` eerst in de DOM voor toegankelijkheid, maar visueel eerst de zijbalk weergeven).
- **Eenvoudige responsieve herindeling** — wissel de gebiedssjabloon per breekpunt.

## Waarom het belangrijk is

Benoemde rastergebieden maken pagina-niveau layouts (header/zijbalk/main/footer) zowel leesbaar als trivaal responsief — herstructurering is een kwestie van het bewerken van een ASCII-kaart, niet het herkabelen van posities.

Het is een van de duidelijkste, meest onderhoudbare lay-outtechnieken die CSS biedt.

Benoemde gebieden definiëren

Herschikking voor mobiel — gewoon de kaart opnieuw tekenen

Waarom dit krachtig is

Waarom het belangrijk is

Gerelateerde vragen