Položka mřížky CSS
1
2
3
4
5
Podřízené prvky (položky)
Kontejner mřížky obsahuje položky mřížky .
Ve výchozím nastavení má kontejner jednu položku mřížky pro každý sloupec v každém řádku, ale položky mřížky můžete upravit tak, aby pokrývaly více sloupců a/nebo řádků.
Vlastnost sloupce mřížky:
Vlastnost grid-columndefinuje, na který sloupec (sloupce) se má položka umístit.
Definujete, kde položka začne a kde bude končit.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Poznámka: Vlastnost grid-columnje zkrácená vlastnost pro vlastnosti grid-column-starta grid-column-end.
Chcete-li umístit položku, můžete se obrátit na čísla řádků nebo pomocí klíčového slova „span“ definovat, kolik sloupců bude položka zahrnovat.
Příklad
Nastavte, aby „položka1“ začínala ve sloupci 1 a končila před sloupcem 5:
.item1 {
grid-column: 1 / 5;
}
Příklad
Položku „item1“ nastavte tak, aby začínala ve sloupci 1 a pokrývala 3 sloupce:
.item1 {
grid-column: 1 / span 3;
}
Příklad
Udělejte, aby „položka 2“ začínala ve sloupci 2 a pokrývala 3 sloupce:
.item2 {
grid-column: 2 / span 3;
}
Vlastnost řádku mřížky:
Vlastnost grid-rowdefinuje, na který řádek se má položka umístit.
Definujete, kde položka začne a kde bude končit.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Poznámka: Vlastnost grid-rowje zkrácená vlastnost pro vlastnosti grid-row-starta grid-row-end.
Chcete-li umístit položku, můžete se podívat na čísla řádků nebo pomocí klíčového slova „span“ definovat, kolik řádků bude položka zahrnovat:
Příklad
Nastavte, aby „položka1“ začínala na řádku 1 a končila na řádku 4:
.item1 {
grid-row: 1 / 4;
}
Příklad
Udělejte, aby „položka 1“ začínala na řádku 1 a rozkládala se na 2 řádcích:
.item1 {
grid-row: 1 / span 2;
}
Vlastnost oblasti mřížky
Vlastnost grid-arealze použít jako zkrácenou vlastnost pro vlastnosti
grid-row-start, grid-column-start, grid-row-enda grid-column-end.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Příklad
Nastavte „položku 8“ tak, aby začínala na řádku 1 a řádku 2 a končila na řádku 5 a řádku 6:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Příklad
Udělejte „položku 8“ tak, aby začínala na řádku 2 a řádku 1 sloupce a pokryla 2 řádky a 3 sloupce:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Pojmenování položek mřížky
Vlastnost grid-arealze také použít k přiřazení názvů položkám mřížky.
Záhlaví
Jídelní lístek
Hlavní
Že jo
Zápatí
Na pojmenované položky mřížky lze odkazovat pomocí grid-template-areasvlastnosti kontejneru mřížky.
Příklad
Položka 1 dostane název „myArea“ a zahrnuje všech pět sloupců v rozložení mřížky s pěti sloupci:
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
Každý řádek je definován apostrofy (' ')
Sloupce v každém řádku jsou definovány uvnitř apostrofů, oddělené mezerou.
Poznámka: Znak tečky představuje položku mřížky bez názvu.
Příklad
Nechte „myArea“ zabírat dva sloupce v pětisloupcovém rozvržení mřížky (tečky představují položky bez názvu):
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
. . .';
}
Chcete-li definovat dva řádky, definujte sloupec druhého řádku uvnitř jiné sady apostrofů:
Příklad
Aby "položka1" zahrnovala dva sloupce a dva řádky:
.grid-container {
grid-template-areas: 'myArea myArea
. . .' 'myArea myArea . . .';
}
Příklad
Pojmenujte všechny položky a vytvořte šablonu webové stránky připravenou k použití:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 {
grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area:
footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main
main main right right'
'menu footer footer footer footer
footer';
}
Pořadí položek
Rozložení mřížky nám umožňuje umístit položky kamkoli chceme.
První položka v kódu HTML se nemusí objevit jako první položka v mřížce.
1
2
3
4
5
6
Příklad
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
Pořadí pro určité velikosti obrazovky můžete znovu uspořádat pomocí dotazů na média:
Příklad
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 /
span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 /
span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6
{ grid-area: 2 / 3 / 3 / 4; }
}