CSS/Eigenschaften/grid-template-columns

Die Eigenschaft grid-template-columns legt Anzahl, Größe und optional auch die Benennung von Spalten fest

Erlaubte Werte

• none - alle Grid-Spalten werden implizit erzeugt
• eine track-list oder auto-track-list. Dabei handelt es sich um eine durch Leerzeichen getrennte Auflistung der Spaltenbreiten und der gewünschten Namen für Rasterlinien. Spaltenbreiten können einfache Maßangaben sein sowie die CSS-Funktionen minmax(), fit-content() und repeat(), die speziell für Grid-Templates eingeführt wurden und zusätzliche Möglichkeiten bieten.

Die vollständige Syntax dieser Liste ist komplex und wurde deshalb in einen eigenen Artikel ausgelagert.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

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 ersten Regelsatz besteht der body aus 3 gleichbreiten Spalten von je 1fr (fraction Bruchteil);
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.

Siehe auch

• CSS/Tutorials/Grid
  • Einführung in das Grid Layout
  • Explizte Erzeugung von Tracks
  • Benannte Linien und Rasterbereiche
• Syntax von Tracklist und Auto-Tracklist

Weblinks

• W3C: Explicit Track Sizing