CSS/Eigenschaften/grid-template-columns

Die Eigenschaft grid-template-columns legt Anzahl, Größe und optional auch die Benennung 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)
• den Schlüsselwörtern:
  • auto, das sich am minimalen Bedarf des vorhandenen Inhalts ausrichtet
  • max-content, das den größten Inhaltsbeitrag des tracks kennzeichnet
  • min-content, das den geringsten Inhaltsbeitrag des tracks kennzeichnet
• den Funktionen:
  • minmax(min, max), die Mindest- und Maximalangaben angibt.
  • Funktion fit-content(<länge> | <prozentwert> ] ),
  • repeat([ <positive-integer> | auto-fill | auto-fit ] , <track-list> ), die es ermöglicht eine Anzahl von gleichen Zeilen in einem track zu definieren.
• optional können Rasterlinien mit eckigen Klammern definiert werden. Durch sie werden die entsprechenden tracks mit Namen versehen.

Vererbung steuernde Werte inherit, initial, unset und revert

Defaultwert

none

anwendbar auf

alle Elemente

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.

Siehe auch

• CSS/Tutorials/Grid
  • CSS/Tutorials/Grid/Grid-Container#explizite Erzeugung
  • CSS/Tutorials/Grid/benannte Linien und Rasterbereiche

Weblinks

• W3c: grid-template-columns