CSS/Eigenschaften/grid-template-columns/track-list

Dieser Artikel beschreibt die Zusammensetzung der <track-list> und <auto-track-list> Syntaxelemente, wie sie in den Eigenschaften grid-template-columns und grid-template-rows verwendet werden. Hier soll nur auf die Syntax des Eigenschaftswertes eingegangen werden, nicht auf alle Details zu möglichen Angaben. Für minmax(), fit-content() und repeat() gibt es eigene Artikel.

Grundsätzlich verwenden die genannten Eigenschaften die gleiche Syntax, um eine <track-list> zu definieren, also die Liste von Spalten oder Zeilen, die ein Grid besitzen soll, und eventuell auch Namen für die dazwischen liegenden Rasterlinien. Es gibt aber einen Sonderfall, der daraus eine <auto-track-list> macht, und das sind die Angaben auto-fill und auto-repeat der repeat()-Funktion. Ein solcher Repeat darf im Eigenschaftswert nur einmal auftauchen, und an den übrigen Stellen führt er dazu, dass die Möglichkeiten für Breiten- oder Höhenangaben eingeschränkt werden (im Folgenden soll nur noch von Breitenangaben gesprochen werden, für die Höhenangaben in grid-template-rows gelten alle Erklärungen analog).

Für die folgenden Syntaxelemente bleiben wir bei den englischen Namen. Ein track ist eine Spalte oder Zeile im Grid, size meint Größe als Oberbegriff für diverse Breitenangaben und breadth steht für Breite. Wie bei Syntaxdefinitionen üblich erfolgt die Aufgliederung vom Allgemeinen hin zum Speziellen, und allgemeinere Bausteine werden als Konstruktion aus spezielleren Bausteinen beschrieben.

Namensdefinitionen bestehen aus einer linken eckigen Klammer, einer durch Leerzeichen getrennten Liste von Liniennamen und einer rechten eckigen Klammer. Näheres zu benannten Rasterlinien finden Sie im Artikel „Benannte Linien und Rasterbereiche“.

Aufbau einer <track-list>

Eine <track-list> besteht aus einer Folge <track-size>- oder <track-repeat>-Angaben, die durch Leerzeichen getrennt sind. Vor, hinter und zwischen diesen Angaben kann eine Namensdefinition erfolgen. Zwei Namensdefinition dürfen nicht direkt aufeinander folgen.

<track-size>

Eins der folgenden Elemente

• eine <track-breadth>
• eine minmax()-Funktion mit dem Aufrufmuster minmax(<inflexible-breadth>, <track-breadth>)
• eine fit-content()-Funktion, die eine <fixed-breadth> als Argument erhält.

<track-repeat>

ist eine repeat()-Funktion mit einer Ganzzahl als Wiederholungsfaktor und beliebigen <track-size>-Angaben für die zu wiederholenden Tracks. Wie in einer Tracklist können die <track-size>-Angaben um Namensdefinitionen ergänzt werden.

Aufbau einer <auto-track-list>

Eine <auto-track-list> ist im Prinzip so wie eine <track-list> aufgebaut, mit diesen Einschränkungen:

• An Stelle von <track-size> wird <fixed-size> verwendet
• An Stelle von <track-repeat> wird ein entweder <auto-repeat> oder <fixed-repeat> verwendet. In einer <auto-track-list> muss es genau eine <auto-repeat>-Angabe geben

<fixed-size>

besteht aus einem der folgenden Elemente:

• eine <fixed-breadth>
• einer minmax() Funktion, in einer dieser beiden Varianten:
  • minmax(<fixed-breadth>, <track-breadth>)
  • minmax(<inflexible-breadth>, <fixed-breadth>)

Mit anderen Worten: Eins der beiden Argumente für minmax() muss eine <fixed-breadth>-Angabe sein. Die andere Angabe kann eine <track-breadth> sein, aber im Minimum ist kein Flex-Wert zugelassen. fit-content() ist für eine <fixed-size> nicht zugelassen.

<fixed-repeat>

ist eine repeat()-Funktion mit einer Ganzzahl als Wiederholungsfaktor und <fixed-size>-Angaben für die zu wiederholenden Tracks. Wie in einer Tracklist können die <track-size>-Angaben um Namensdefinitionen ergänzt werden.

<auto-repeat>

ist ein <fixed-repeat>, bei dem an Stelle einer Ganzzahl das Schlüsselwort auto-repeat oder auto-fill notiert wird.

Breitenangaben

Diese Angaben können in <track-list> oder <auto-track-list> vorkommen.

<track-breadth>

ein <inflexible-breadth> oder ein Flex-Wert.

Tracks, für die ein Flexwert festgelegt wurde, erhalten ihren Platz im Verhältnis dieser Flexwerte zugewiesen. Zunächst wird der Platz bestimmt, der für die übrigen Tracks benötigt wird. Der verbleibende Platz wird auf die Flex-Tracks verteilt. Dazu werden alle fr-Angaben aufsummiert. Ist die Summe kleiner als 1 (was bei Angaben wie 0.2fr vorkommen kann), wird sie auf 1 gesetzt. Der Anteil, den der jeweilige Flex-Track dann vom verbleibenden Platz erhält, bestimmt sich, indem sein Flex-Wert durch die berechnete Summe geteilt wird.

<inflexible-breadth>

• eine Längenangabe oder ein Prozentwert
• eins der Schlüsselwörter min-content, max-content oder auto

min-content und max-content beziehen sich auf die intrinsische Größe der Elemente, die sich in dem zugehörigen Track befinden. Diese Größe ist zumeist fest (z.B. die Breite eines Bildes) oder nicht vorhanden. Für fließenden Text kann diese Größe hingegen variabel sein. Ein <p>-Element, das automatischen Zeilenumbruch verwendet, hat eine minimale Breite, die der Breite des längsten Wortes entspricht, und eine maximale Breite, die sich dadurch bestimmt, dass man die Textbreite unter der Annahme ermittelt, dass das Element unendlich breit wäre. Insofern sind min-content und max-content in grid-template-rows nur dann sinnvoll, wenn Text mit einem vertikalen writing-mode verwendet wird.

auto verteilt die Track-Größen so, dass Grid-Bereiche mit mehr Inhalt auch mehr Platz bekommen. Die Angabe von stretch bei den justify- oder align- Eigenschaften kann ein auto-Element über seine max-content-Größe hinaus ausdehnen. Bei max-content passiert das nicht.

<fixed-breadth>

eine Längenangabe oder ein Prozentwert (negative Werte sind nicht erlaubt!)