CSS/Eigenschaften/grid-template-columns
Aus SELFHTML-Wiki
< CSS | Eigenschaften(Weitergeleitet von 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
undrevert
- 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));
}
Beachten Sie:
IE10 und IE 11 verwenden eine ältere Spezifikation, in der diese Eigenschaft unter dem Namen
-ms-grid-columns
implementiert ist.
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.