Hvordan fungerer grid-template-areas og responsive grids?

Question

Accepted Answer

`grid-template-areas` lar deg legge ut et grid **visuelt** ved å navngi regioner, noe som gjør komplekse sidetopologier lesbare og enkle å omorganisere responsivt.

## Definere navngitte 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-en `grid-template-areas` *er* layouten — du kan se strukturen på et blikk, og å gjenta et navn gjør at en region spenner over celler.

## Omorganisere for mobil — tegn bare kartet på nytt

```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 å endre hele layouten for mobil, skriver du bare områdekartet på nytt — HTML og `grid-area`-tilordningene forblir identiske. Dette er langt renere enn å omposisjonere hvert element individuelt.

## Hvorfor dette er kraftig

- **Selv-dokumenterende** — CSS reflekterer visuelt det gjengitte layoutet.
- **Koblet fra kildeordre** — elementer kan plasseres hvor som helst uavhengig av HTML-ordren (bra for å plassere `main` først i DOM for tilgjengelighet, men likevel vise sidestolpen først visuelt).
- **Enkel responsiv omflytting** — bytt områdemalen per bruddpunkt.

## Hvorfor det betyr noe

Navngitte gridområder gjør sidetopologier på sidenivå (header/sidebar/main/footer) både lesbare og trivielt responsive — omstrukturering er et spørsmål om å redigere et ASCII-kart, ikke omverkabling av posisjoner.

Det er en av de klareste, mest vedlikeholdbare layoutteknikker CSS tilbyr.