Hur fungerar grid-template-areas och responsiva rutnät?

Question

Accepted Answer

`grid-template-areas` låter dig planera ett rutnät **visuellt** genom att namnge regioner, vilket gör komplexa sidlayouter läsbara och lätta att omöblera responsivt.

## Definiera namngivna områden

```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-art `grid-template-areas` *är* layouten — du kan se strukturen snabbt, och genom att upprepa ett namn gör du en region sträcka sig över celler.

## Omställa för mobil — bara rita om kartan

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

För att ändra hela layouten för mobil skriver du bara om områdeskartan — HTML och `grid-area`-tilldelningar förblir identiska. Det här är mycket renare än att ompositionera varje element individuellt.

## Varför detta är kraftfullt

- **Självedokumenterande** — CSS speglar visuellt den renderade layouten.
- **Oberoende av källordning** — element kan placeras var som helst oavsett HTML-ordning (bra för att placera `main` först i DOM för tillgänglighet, men visa sidofältet först visuellt).
- **Enkel responsiv omflöde** — byt områdesmallen per brytpunkt.

## Varför det är viktigt

Namngivna rutnätsområden gör sidnivålayouter (rubrik/sidofält/huvudsaklig/sidfot) både läsbara och trivialt responsiva — omstrukturering är en fråga om att redigera en ASCII-karta, inte om att omkoppla positioner.

Det är en av de tydligaste och mest underhållbara layouttekniker CSS erbjuder.