Hvordan fungerer `grid-template-areas` og responsive grids?

Question

Accepted Answer

`grid-template-areas` lader dig layoute et grid **visuelt** ved at navngive områder, hvilket gør komplekse sidelayouts læsbare og nemme at omarrangere responsivt.

## Definition af navngivne områder

```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; }
```

ASCII-kunst `grid-template-areas` *er* layoutet — du kan se strukturen på et øjeblik, og at gentage et navn får et område til at strække sig over celler.

## Omarrangering til mobil — tegn bare kortet igen

```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";
  }
}
```

For at ændre hele layoutet til mobil skal du bare omskrive områdekortet — HTML og `grid-area` tildeling forbliver identisk. Dette er meget pænere end at ompositionere hvert element individuelt.

## Hvorfor dette er kraftfuldt

- **Selv-dokumentering** — CSS afspejler visuelt det renderede layout.
- **Adskilt fra kilderekkefølge** — elementer kan placeres hvor som helst uanset HTML-rækkefølge (godt for at placere `main` først i DOM for tilgængelighed, men stadig vise sidebjælken først visuelt).
- **Let responsiv omflytning** — skift områdeskabelonen pr. breakpoint.

## Hvorfor det betyder noget

Navngivne gridområder gør sidelayouts (header/sidebar/main/footer) både læsbare og trivielt responsive — omstrukturering er et spørgsmål om at redigere et ASCII-kort, ikke genledning af positioner.

Det er en af de klareste, mest vedligeholdelige layoutteknikker, som CSS tilbyder.