CSS Grid do hloubky

Pojmenované oblasti

Rozvržení celé stránky se čísly linií zapsat dá, ale čte se mizerně – kdo se k takovému kódu vrátí za půl roku, počítá sloupce na prstech. Vlastnost grid-template-areas proto nabízí druhý zápis: rozvržení se nakreslí jmény a jeden řádek textu je jeden řádek mřížky.

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  gap: 16px;
}

Mezery mezi jmény nemají žádný význam kromě toho, že se v nich dá zarovnávat – a vyplatí se to, protože zarovnaný mustr je vidět na první pohled.

Rozměry grid-template-areas neurčuje. Řádky mřížky sice založí, ale jak mají být sloupce široké a řádky vysoké, se pořád píše v grid-template-columns a grid-template-rows. Bez nich si prohlížeč rozměry odvodí od obsahu.

Prvky do oblastí jménem

Mustr sám o sobě nic nepřesune. Kontejneru říká, jak vypadá mřížka; každý potomek si pak řekne o svou oblast:

<body class="page">
  <header>Studentský web</header>
  <nav>Domů · Články · Kontakt</nav>
  <main>Sem přijde obsah stránky.</main>
  <footer>© 2026</footer>
</body>

.page > header { grid-area: header; }
.page > nav    { grid-area: nav; }
.page > main   { grid-area: main; }
.page > footer { grid-area: footer; }

Je to tentýž grid-area jako v minulé kapitole, jen místo čtyř čísel dostal jméno. Všimněte si, že se v něm píše bez uvozovek – ty patří jen do grid-template-areas, kde ohraničují celý řádek mřížky.

Prázdná buňka a pravidla mustru

Buňku, která má zůstat prázdná, zapíšeme tečkou:

.page {
  grid-template-areas:
    "header header"
    "nav    main"
    ".      footer";
}

Mustr musí dávat smysl jako obrázek, jinak ho prohlížeč zahodí celý:

• Každý řádek má stejný počet sloupců. Jinak je zápis neplatný.
• Každá oblast musí být obdélník. Oblast ve tvaru písmene L neexistuje.
• Stejné jméno vedle sebe znamená jednu oblast přes víc buněk. Přesně tak se hlavička roztáhne přes celou šířku.
• Jméno se nesmí opakovat na dvou místech, která spolu nesousedí. Dvě oddělené oblasti téhož jména by nebyly obdélník.

Proč je to lepší než čísla linií

Rozvržení pro úzké okno se pak dá napsat tak, že se přepíše jediná vlastnost:

@media (max-width: 700px) {
  .page {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
    grid-template-columns: 1fr;
  }
}

Prvky v HTML zůstaly na svém místě a grid-area u nich se nezměnilo. Změnila se jen kresba rozvržení. To je celý smysl mustru: rozvržení stojí na jednom místě a dá se přečíst i po půl roce.

Kdybychom totéž psali čísly linií, museli bychom v úzkém okně přepsat grid-column i grid-row u všech čtyř prvků – a u páté oblasti u pěti. Chyba by se přitom schovala do kteréhokoli z nich.