CSS/Eigenschaften/grid-template-columns

Die Eigenschaft grid-template-columns legt Anzahl und Größen der Spalten fest (track sizing functions).

erlaubte Werte	none eine <track-list> eine <auto-track-list Die Werte entsprechen einer Leerzeichen-separierten Liste von: positiven Längenangaben oder Prozentwerten <flex> der Angabe eines nicht-negativen Bruchteils mit der Einheit fr (Fraction: engl. für Bruch) max-content Schlüsselwort, das den größten Inhaltsbeitrag des tracks kennzeichnet min-content Schlüsselwort, das den geringsten Inhaltsbeitrag des tracks kennzeichnet die Funktion minmax(min, max), die Mindest- und Maximalangaben angibt. auto, die sich am minimalen Bedarf des vorhandenen Inhalts ausrichtet die Funktion fit-content(<länge> | <prozentwert> ] ), die Funktion repeat([ <positive-integer> | auto-fill | auto-fit ] , <track-list> ), die es ermöglicht eine Anzahl von gleichen Zeilen in einem track zu definieren. Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: * none
anwendbar auf	alle Elemente (Unterschied Tag Element Attribut)
Browsersupport	Details: caniuse.com
Vererbung	nein
animierbar	nein

Beispiel

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; 
}
body {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
}
body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); 
}

Im oberen Teil besteht der body aus 3 gleichbreiten Spalten; die zweite Festlegung verwendet die repeat()-Funktion, die ebenfalls 3 gleichbreite Spalten erzeugt.
das untere Beispiel erzeugt mit dem ersten Parameter auto-fill so viele Spalten wie möglich, der zweite Parameter besteht aus der minmax()-Funktion, die mindestens 15em breite Spalten erzeugt.

Beachten Sie: IE10 und IE 11 verwenden eine ältere Spezifikation, in der diese Eigenschaft unter dem Namen -ms-grid-columns implementiert ist.

Weblinks

• W3c: grid-template-columns

Siehe auch

• CSS/Tutorials/Grid/Grid-Container#explizite Erzeugung