CSS grid-template-rows- Eigenschaft
Beispiel
Geben Sie die Zeilengröße (Höhe) an:
.grid-container {
display: grid;
grid-template-rows:
100px 300px;
}
Definition und Verwendung
Die grid-template-rows
Eigenschaft gibt die Anzahl (und die Höhe) der Zeilen in einem Rasterlayout an.
Die Werte sind eine durch Leerzeichen getrennte Liste, wobei jeder Wert die Höhe der jeweiligen Zeile angibt.
Standardwert: | keiner |
---|---|
Vererbt: | Nein |
Animierbar: | ja. Lesen Sie mehr über animierbare |
Ausführung: | CSS-Grid-Layout-Modul Stufe 1 |
JavaScript-Syntax: | Objekt .style.gridTemplateRows="50px 200px" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
grid-template-rows | 57 | 16 | 52 | 10 | 44 |
CSS-Syntax
grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
none | No size is set. Rows are created if needed | |
auto | The size of the rows is determined by the size of the container, and on the size of the content of the items in the row | |
max-content | Sets the size of each row to depend on the largest item in the row | |
min-content | Sets the size of each row to depend on the smallest item in the row | |
length | Sets the size of the rows, by using a legal length value. Read about length units |
Verwandte Seiten
CSS-Tutorial: CSS-Grid-Layout
CSS-Referenz: Die grid-columns- Eigenschaft
CSS-Referenz: Die Grid-Template- Eigenschaft