CSS Grid-Template-Columns- Eigenschaft
Beispiel
Erstellen Sie einen 4-Spalten-Grid-Container:
.grid-container {
display: grid;
grid-template-columns:
auto auto auto auto;
}
Definition und Verwendung
Die grid-template-columns
Eigenschaft gibt die Anzahl (und die Breite) der Spalten in einem Rasterlayout an.
Die Werte sind eine durch Leerzeichen getrennte Liste, wobei jeder Wert die Größe der jeweiligen Spalte angibt.
Standardwert: | keiner |
---|---|
Vererbt: | Nein |
Animierbar: | ja. Lesen Sie mehr über animierbare |
Ausführung: | CSS-Grid-Layout-Modul Stufe 1 |
JavaScript-Syntax: | Objekt .style.gridTemplateColumns="50px 50px 50px" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
grid-template-columns | 57 | 16 | 52 | 10 | 44 |
CSS-Syntax
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
none | Default value. Columns are created if needed | |
auto | The size of the columns is determined by the size of the container and on the size of the content of the items in the column | |
max-content | Sets the size of each column to depend on the largest item in the column | |
min-content | Sets the size of each column to depend on the smallest item in the column | |
length | Sets the size of the columns, by using a legal length value. Read about length units | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Erstellen Sie einen 4-Spalten-Rastercontainer und geben Sie eine Größe für jede Spalte an:
.grid-container {
display: grid;
grid-template-columns:
30px 200px auto 100px;
}
Verwandte Seiten
CSS-Tutorial: CSS-Grid-Layout
CSS-Referenz: Die Eigenschaft grid-template- rows
CSS-Referenz: Die Grid-Template- Eigenschaft