Vlastnost mřížky CSS
Příklad
Položku „item1“ nastavte tak, aby začínala na řádku 2, sloupci 1, a zahrnovala 2 řádky a 3 sloupce:
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Vlastnost grid-area
určuje velikost a umístění položky mřížky v rozložení mřížky a je to zkrácená vlastnost pro následující vlastnosti:
Vlastnost grid-area
lze také použít k přiřazení názvu k položce mřížky. Na pojmenované položky mřížky pak lze odkazovat pomocí vlastnosti
grid-template-areas kontejneru mřížky. Viz příklady níže.
Výchozí hodnota: | auto / auto / auto / auto |
---|---|
Zděděno: | Ne |
Animovatelné: | Ano. Přečtěte si o tématu Animable |
Verze: | Modul rozložení mřížky CSS, úroveň 1 |
Syntaxe JavaScriptu: | object .style.gridArea="1 / 2 / rozpětí 2 / rozpětí 3" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Property | |||||
---|---|---|---|---|---|
grid-area | 57 | 16 | 52 | 10 | 44 |
Syntaxe CSS
grid-area: grid-row-start / grid-column-start / grid-row-end /
grid-column-end | itemname;
Hodnoty vlastností
Value | Description |
---|---|
grid-row-start | Specifies on which row to start displaying the item. |
grid-column-start | Specifies on which column to start displaying the item. |
grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
itemname | Specifies a name for the grid item |
Další příklady
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 {
display:
grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
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 {
display:
grid;
grid-template-areas: 'myArea myArea . . .';
}
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';
}
Související stránky
CSS tutoriál: CSS Grid Layout