CSS Grid-Row- Eigenschaft
Beispiel
Lassen Sie "item1" in Zeile 1 beginnen und sich über 2 Zeilen erstrecken:
.item1 {
grid-row: 1 / span 2;
}
Definition und Verwendung
Die grid-row
Eigenschaft gibt die Größe und Position eines Rasterelements in einem Rasterlayout an und ist eine Kurzformeigenschaft für die folgenden Eigenschaften:
Standardwert: | Auto Auto |
---|---|
Vererbt: | Nein |
Animierbar: | ja. Lesen Sie mehr über animierbare |
Ausführung: | CSS-Grid-Layout-Modul Stufe 1 |
JavaScript-Syntax: | Objekt .style.gridRow="2 / Spannweite 2" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
grid-row | 57 | 16 | 52 | 10 | 44 |
CSS-Syntax
grid-row: grid-row-start /
grid-row-end;
Eigenschaftswerte
Value | Description |
---|---|
grid-row-start | Specifies on which row to start displaying the item. |
grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. |
Mehr Beispiele
Beispiel
Sie können Zeilenzeilenwerte anstelle der Anzahl der zu überspannenden Zeilen verwenden:
.item1 {
grid-row: 1 / 3;
}
Verwandte Seiten
CSS-Tutorial: CSS-Grid-Layout