Kako delujejo grid-template-areas in responzivne mreže?

Question

Accepted Answer

`grid-template-areas` vam omogoča postavitev mreže **vizualno** z imenovanjem regij, kar naredi kompleksne postavitve strani čitljive in enostavne za odzivne spremembe.

## Opredelitev poimenovanih območij

```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` *je* sama postavitev — strukturo vidite na prvi pogled, in ponavljanje imena naredi regijo, da se razteza čez celice.

## Preureditev za mobilne naprave — samo ponovno narišite zemljevid

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

Za spremembo celotne postavitve za mobilne naprave, preprosto prepišete zemljevid območij — HTML in `grid-area` dodelitve ostanejo enake. To je veliko čistejše kot repozicioniranje vsakega elementa posebej.

## Zakaj je to moguče

- **Samodokumentiranje** — CSS vizualno odraža upodobljeno postavitev.
- **Neodvisno od vrstnega reda izvora** — elementi se lahko postavijo kjerkoli ne glede na vrstni red HTML (dobro za postavljanje `main` na prvo mesto v DOM-u za dostopnost, vendar vizualno prikaz stranskega stolpca najprej).
- **Lahka responzivna preureditev** — zamenjajte predlogo območja na vsaki prelomni točki.

## Zakaj je to pomembno

Poimenovana mrežna območja naredijo postavitve na ravni strani (glava/stranski stolpec/glavno/noga) tako čitljive kot trivialnim responzivne — preustrukturiranje je zadeva urejanja ASCII-zemljevida, ne prepletanja položajev.

To je ena od najjasnejših in najbolj vzdrževalnih tehnik postavitve, ki jo ponuja CSS.