Kaip veikia grid-template-areas ir atsakūs tinkleliai?

Question

Accepted Answer

`grid-template-areas` leidžia išdėstyti tinklelį **vizualiai** pavadinant sritis, todėl sudėtus puslapio išdėstymus lengva skaityti ir lengvai pertvarkyti reagavus.

## Vardinių plotų apibrėžimas

```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-meno `grid-template-areas` *yra* išdėstymas — vienoje žvilgsnio galite pamatyti struktūrą, o pasikartojantis vardas daro regioną, apimantį ląsteles.

## Mobiliosioms perrengimas — tiesiog perbraižykite žemėlapį

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

Norėdami pakeisti visą mobilaus įrenginio išdėstymą, tiesiog perrašykite plotų žemėlapį — HTML ir `grid-area` priskyrimai lieka tokie patys. Tai yra daug švariau nei kiekvieno elemento atskirai perrengimas.

## Kodėl tai galingas

- **Savistabigė dokumentacija** — CSS vizualiai atspindi nes išdėstymą.
- **Atsiskyrę nuo šaltinio tvarkos** — elementai gali būti išdėstyti bet kur, neatsižvelgiant į HTML tvarką (gerai, jei `main` pirmiausia dedama į DOM prieš pasiekiamumą, bet vizualiai šoninė juosta rodoma pirmausia).
- **Lengvas atsakus reflus** — sukeiskite sritį šabloną pagal pertrauką.

## Kodėl tai svarbu

Vardiniai tinklelio plotai daro puslapio lygio išdėstymus (antraštė/šoninė juosta/pagrindinis/poraštis) tiek lengvai skaitomus, tiek trivialiai reagavus — pertvarkymas yra ASCII žemėlapio redagavimas, o ne padėčių permainų.

Tai yra viena iš aiškiausių, labiausiai nuolatinių išdėstymo metodų, kuriuos siūlo CSS.