Vlastnost grid-template
slouží k definování mřížky v CSS gridu.
Jde o zkratku (shorthand) pro vlastnosti grid-template-rows
a grid-template-columns
a také grid-template-areas.
Definování sloupečků a řádků
V jednoduchém demu si ukážeme grid-template
jako zkratku pro vlastnosti grid-template-rows
a grid-template-columns
:
.container {
grid-template: auto auto / 2fr 1fr;
}
To odpovídá zápisu:
.container {
grid-template-rows: auto auto;
grid-template-columns: 2fr 1fr;
grid-template-areas: none;
}
Sloupečky, řádky a pojmenované stopy
V hranatých závorkách zde můžeme uvést také pojmenované řádky a sloupce jak o nich píšeme v textu o vlastnostech grid-template-rows
a grid-template-columns
.container {
grid-template:
[row-1] auto [row-2] auto
/
[col-1] 2fr [col-2] 1fr;
To odpovídá zápisu:
.container {
grid-template-rows: [row-1] auto [row-2] auto;
grid-template-columns: [col-1] 2fr [col-2] 1fr;
grid-template-areas: none;
}
Sloupečky, řádky a pojmenované oblasti
V téhle jedné vlastnosti je také možné definovat rozměry gridu spolu s pojmenováním oblastí:
.container {
display: grid;
grid-template:
"heading heading" auto
"one two" auto
/
2fr 1fr;
Je to už docela složité, chápu. Definují se nejprve řádky – jejich jména a výšky – a pak za lomítkem šířky sloupečků. Odpovídá to následujícímu:
.container {
grid-template-rows: auto auto;
grid-template-columns: 2fr 1fr;
grid-template-areas:
"heading heading"
"one two";
}
Co je dobré vědět?
- Všimněte si, že
grid-template
nastavujegrid-template-areas: none
, takže resetuje i případné dříve nastavené oblasti. - Funkce
repeat()
zde není povolena, protože se zde dává přednost vizuálnímu vyjádření mřížky, takzvanému „ASCII artu“. - Stejnou syntaxi má vlastnost
grid
, která ovšem navíc umožňuje nastavení rozměrů implicitního gridu (vlastnostigrid-auto-columns
,grid-auto-rows
, andgrid-auto-flow
), takže je pravděpodobné, že můžete chtít použít spíše právě ji.
Podpora v prohlížečích
Internet Exploreru 11 vlastnost nepodporuje. Asi už víte, že díky Autoprefixeru to tak problematické být nemusí. Doporučení zde ale zní: Používejte vlastnost grid-template
, nikoliv zkratku grid
a půjde to.
Komentáře
Váš názor? Vaše zkušenosti? Našli jste chybu?