Kako funkcioniraju grid-template-areas i responzivne mreže?

Question

Accepted Answer

`grid-template-areas` vam omogućava da vizualno postavite mrežu nazivanjem regija, čineći složene rasporede stranica čitljivim i lako preuredljivim na responzivan način.

## Definiranje nazivanih područja

```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* raspored — možete vidjeti strukturu na prvi pogled, i ponavljanje imena čini da se regija proteže kroz ćelije.

## Preuzimanje za mobilni — samo ponovno nacrtajte mapu

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

Da biste promijenili cijeli raspored na mobilnom uređaju, trebate samo ponovno napisati mapu područja — HTML i dodjele `grid-area` ostaju iste. To je mnogo čistije od repostavljanja svakog elementa pojedinačno.

## Zašto je ovo moćno

- **Samoodokumentirajuće** — CSS vizualno odražava prikazani raspored.
- **Odvojeno od redoslijeda izvora** — elementi mogu biti postavljeni bilo gdje bez obzira na redoslijed HTML-a (dobro za postavljanje `main` prvoga u DOM za pristupačnost, ipak prikaz bočne trake vizualno prvo).
- **Lako responzivno prestrukturiranje** — zamijenite šablonu područja po svakom prijelomnom mjestu.

## Zašto je ovo važno

Nazivana područja mreže čine rasporede na razini stranica (zaglavlje/bočna traka/glavno/podnožje) i čitljivim i trivijalno responzivnim — restrukturiranje je stvar uređivanja ASCII mape, a ne ponovno spajanja položaja.

To je jedan od najjasnijih i najlakše održavanih tehnika rasporeda koje CSS nudi.