Vlastnost grid-template-areas: Pojmenovávaní oblastí gridu

grid-template-areas slouží k pojmenovávání obdélníkových oblastí definovaných CSS gridem.

grid-template-areas vytváří oblasti pro případ, které jsou pak použitelné ve vlastnostech jako grid-area a dalších, sloužících k umísťování elementů do gridu.

V příkladu na obrázku pojmenováváme oblasti následovně:

.container {
  grid-template-areas:
    "first first"
    ".     second";
}

.first {
  grid-area: first;
}

.second {
  grid-area: second;
}

Vysvětleme:

• Je dobré vědět, že grid je definovaný jako dvousloupcový (grid-template-columns: 1fr 1fr) a dvouřádkový (grid-template-rows: auto auto).
• grid-template-areas je prostě seznam řetězců, které označují oblasti.
• První řádek hodnot ("first first") znamená, že na první dvě buňky layoutu patří do oblasti first.
• Tečka (.) uvádí prázdnou buňku, kde se nic zobrazovat nemá.
• Elementy .first a .second je pak potřeba ručně umístit do vyhrazených oblastí mřížky pomocí vlastnosti grid-area.

Následuje pár poznámek ze čtení specifikace.

Definování mřížky oblastmi

Pojmenovanými oblastmi je možné definovat samotný grid. V některých případech tedy nemusíte potřebovat vlastnosti grid-template-rows a grid-template-columns. Viz CodePen: cdpn.io/e/ymJXaX

Implicitně vytvořené oblasti a stopy

Pojmenované oblasti souvisí s pojmenovanými stopami.

Například definování pojmenované oblasti pojmenované například head, vytvoří dvě stopy head-start a head-end.

A co je ještě lepší – definováním stop head-start a head-end ve vlastnostech grid-template-rows a grid-template-columns vytvoříte oblast head.

Výhody definování oblastí mřížky

Oblasti gridu samozřejmě není nutné definovat pokaždé. Hodit se ale budou pro komplexnější layouty, které zároveň potřebujeme definovat a spravovat ručně. Typickým příkladem jsou rozvržení celostránkové.

Vlastnost grid-template-areas je ale užitečná ještě ve dvou směrech. Za prvé zlidšťuje zápis layoutu. Je totiž lepší mluvit o oblasti heading než o „oblasti mezi první a osmou buňkou prvního řádku gridu“. Za druhé umožňuje pěkné kejkle s Media Queries.

Využití Media Queries

V dalším demíčku si pojďme ukázat věc, která se mi na grid-template-areas velmi líbí – kombinace s Media Queries.

Je to jednoduché – oblasti je prostě možné různě přehazovat v rámci definovaného gridu.

Výše uvedený příklad prostě stačí rozšířit o tyto deklarace:

@media screen and (max-width: 600px) {
  .container {
    grid-template-areas:
      "first first"
      "second second";
  }
}

@media screen and (min-width: 1024px) {
  .container {
    grid-template-areas:
      "first second"
      "first second";
  }
}

Podpora v prohlížečích

Opět je zde jediná potíž. Internet Exploreru 11, který grid-template-areas. Už ale asi také víte, že díky Autoprefixeru to tak problematické být nemusí.