CSS/Eigenschaften/grid-template-columns

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften(Weitergeleitet von Grid-template-columns)
Wechseln zu: Navigation, Suche

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:
  • 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

Weblinks