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 oblastifirst
. - 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í vlastnostigrid-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í.
Komentáře
Váš názor? Vaše zkušenosti? Našli jste chybu?