Jak fungují `grid-template-areas` a responzivní mřížky?

Question

Accepted Answer

`grid-template-areas` vám umožňuje rozložit mřížku **vizuálně** pojmenováním oblastí, což činí složitá rozvržení stránek čitelnými a snadno přeskupitelnými responzivně.

## Definování pojmenovaných oblastí

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

`grid-template-areas` ve stylu ASCII art *je* rozvržením — vidíte strukturu na první pohled a opakování názvu způsobí, že se oblast rozprostře přes buňky.

## Přeuspořádání pro mobilní zařízení — stačí překreslit 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";
  }
}
```

Chcete-li změnit celé rozvržení pro mobilní zařízení, stačí přepsat mapu oblastí — HTML a přiřazení `grid-area` zůstávají stejné. To je mnohem čistší než individuální repositionování jednotlivých prvků.

## Proč je to silné

- **Samo-dokumentující se** — CSS vizuálně zrcadlí vykreslené rozvržení.
- **Nezávislé na pořadí zdroje** — prvky lze umístit kamkoliv bez ohledu na pořadí HTML (vhodné pro umístění `main` jako prvního v DOM z důvodu přístupnosti, přesto zobrazení bočního panelu vizuálně v první řadě).
- **Snadný responzivní přetok** — vyměňte šablonu oblasti pro každý breakpoint.

## Proč na tom záleží

Pojmenované oblasti mřížky dělají rozložení na úrovni stránky (záhlaví/boční panel/hlavní/zápatí) čitelná a triviálně responzivní — restrukturalizace je věcí editace ASCII mapy, ne přepojování pozic.

Jde o jednu z nejjasnějších a nejudržitelnějších technik rozvržení, které CSS nabízí.