grid
je zkratka (shorthand) pro definování všech vlastností CSS gridu.
Vlastnost grid
je součástí specifikace CSS gridu.
V jedné deklaraci můžete nastavit jen jeden z obou možných gridů:
- explicitní, výslovně definovaný pomocí vlastností
grid-template-rows
,grid-template-columns
agrid-template-areas
, - implicitní, definovaný pomocí vlastností
grid-auto-rows
,grid-auto-columns
agrid-auto-flow
…a ještě další vlastnosti.
Je to mocná zbraň, která dokáže zrychlit práci zkušených mřížkových ninjů, ovšem začínajícím bych ji raději nedoporučoval používat.
Pojďme se podívat na několik ukázek.
Definice explicitního gridu
V zápisu lomítkem oddělujeme zápis pro grid-template-rows
od grid-template-columns
:
grid: <grid-template-rows> / <grid-template-columns>;
Například:
.container {
grid: auto auto / 2fr 1fr;
}
Odpovídá tomuto zápisu:
.container {
grid-template-rows: auto auto;
grid-template-columns: 2fr 1fr;
grid-template-areas: none;
}
Je to prostě úplně stejné jako u zkratky grid-template
.
Implicitní grid a auto-flow
To zda definujete v daném směru definujete implicitní grid se pozná podle klíčového slova auto-flow
:
.container {
grid: auto-flow 1fr / 100px 100px;
}
Zápis je ekvivalentní tomuto:
.container {
grid-auto-flow: row;
grid-auto-rows: 1fr;
grid-auto-columns: auto;
grid-template-rows: none;
grid-template-columns: 100px 100px;
grid-template-areas: none;
}
Vysvětlíme:
grid-auto-flow: row
– grid se bude vykreslovat po řádcích. Jak můžete vědět ze studia vlastnostigrid-auto-flow
, hodnotagrid-auto-flow:row
je v prohlížečích výchozí, takže bychom ji nemuseli nastavovat.grid-auto-rows: 1fr
– že implicitní grid bude mít výšku řádků1fr
.grid-auto-columns: auto
– implicitní grid nemá definované sloupce, takže se budou řídit šířkou obsahu buňky.grid-template-rows: none
– buňky gridu nemají ve směru řádků nijak nastavené rozměry.grid-template-columns: 100px 100px
– buňky mají v explicitním gridu nastavenou šířku100px
a tvoří dva sloupce.
Podobné to bude u opačného zápisu:
.container {
grid: 1fr / auto-flow 100px 100px;
}
Ten je ekvivalentní následujícímu:
.container {
grid-auto-flow: column;
grid-auto-rows: auto;
grid-auto-columns: 100px;
grid-template-rows: 1fr;
grid-template-columns: none;
grid-template-areas: none;
}
Zahuštěné vykreslování, klíčové slovo dense
Pokud jste viděli vlastnost grid-auto-flow
, určitě vás zaujala hodnota dense
.
Můžeme ji nastavit i pomocí zkratky grid
. Následující dva kousky kódu budou totožné:
.container {
grid: auto-flow dense 100px / 1fr 2fr;
}
.container {
grid-auto-flow: row dense;
grid-auto-rows: 100px;
grid-template-columns: 1fr 2fr;
}
Co je ještě dobré vědět?
- U všech zkratek v CSS platí, že vlastnosti, které nedefinujeme, zkratka nastaví na jejich výchozí hodnoty. To může být občas nebezpečné.
- Vlastnost pro mezeru mezi buňky layoutu –
gap
– nelze přes zkratkugrid
nastavit a není tudíž jejím použitím resetována.
Podpora v prohlížečích
Zkratku grid
zvládají všechny prohlížeče, kromě Internet Exploreru. Pokud na projektu potřebujete zapisovat CSS grid i tento prohlížeč, doporučuji se zkratce grid
vyhnout.
Nástroj Autoprefixer, který podporu základních layoutů v IE dokáže zařídit, doporučuje použití samotných vlastností nebo maximálně zkratky grid-template
.
Komentujte
Našli jste chybu? Chcete doplnit svůj pohled?
Pište: [email protected]
Sdílení potěší: