Vlastnost mřížky a sloupce CSS
Příklad
Položku „item1“ nastavte tak, aby začínala ve sloupci 1 a pokrývala 2 sloupce:
.item1 {
grid-column: 1 / span 2;
}
Definice a použití
Vlastnost grid-column
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:
Výchozí hodnota: | 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.gridColumn="2 / rozpětí 2" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Property | |||||
---|---|---|---|---|---|
grid-column | 57 | 16 | 52 | 10 | 44 |
Syntaxe CSS
grid-column: grid-column-start /
grid-column-end;
Hodnoty vlastností
Value | Description |
---|---|
grid-column-start | Specifies on which column to start displaying the item. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
Další příklady
Příklad
Místo počtu sloupců můžete použít hodnoty na řádku:
.item1 {
grid-column: 1 / 3;
}
Související stránky
CSS tutoriál: CSS Grid Layout