Kuinka `grid-template-areas` ja responsiiviset ruudukot toimivat?

Question

Accepted Answer

`grid-template-areas` mahdollistaa ruudukon **visuaalisen** asettamisen nimeämällä alueita, jolloin monimutkaiset sivuasettelut ovat luettavia ja helppo järjestää uudelleen responsiivisesti.

## Nimettyjen alueiden määrittäminen

```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-taiteen muotoinen `grid-template-areas` *on* asettelu — näet rakenteen yhdellä silmäyksellä, ja nimen toistaminen saa alueen ulottumaan solujen yli.

## Uudelleenjärjestely mobiilille — piirtä kartta uudelleen

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

Jotta voit muuttaa koko asettelun mobiilille, kirjoitat vain alueen kartan uudelleen — HTML ja `grid-area` määritykset pysyvät identtisinä. Tämä on paljon siistimpää kuin jokaisen elementin uudelleensijoittaminen erikseen.

## Miksi tämä on voimakas

- **Itselaakseva** — CSS heijastaa visuaalisesti renderoidun asettelun.
- **Irrotettu lähteen järjestyksestä** — elementit voidaan sijoittaa mihin tahansa HTML-järjestyksestä riippumatta (hyvä `main` panemiseksi ensimmäiseksi DOM:ssa saavutettavuutta varten, mutta silti näyttää sivupalkki visuaalisesti ensin).
- **Helppo responsiivinen uudelleenvirtaus** — vaihda aluemalli jokaisella taukokohdalla.

## Miksi sillä on merkitystä

Nimetyt ruudukkoalueet tekevät sivun tason asetteluista (ylätunniste/sivupalkki/pää/alatunniste) sekä luettavia että triviaalisti responsiivia — uudelleenjärjestely on ASCII-kartan muokkaamisen asia, ei positioiden uudelleenjohdotusta.

Se on yksi selkeimmistä ja ylläpidettävimmistä asetteluteknikoista, joita CSS tarjoaa.