grid-template-columns

none

Gibt an, dass kein explizites Gitter vorhanden ist. Jegliche Spalten werden implizit generiert und ihre Größe wird durch die Eigenschaft grid-auto-columns bestimmt.

[line-name]

Ein <custom-ident>, der einen Namen für die Linie an dieser Position angibt. Das ident kann jeder gültige String sein, außer den reservierten Wörtern span und auto. Linien können mehrere Namen haben, die innerhalb der eckigen Klammern durch ein Leerzeichen getrennt sind, z.B. [line-name-a line-name-b].

<length>

Eine nicht-negative Länge, die die Breite der Spalte angibt.

<percentage>

Ein nicht-negativer <percentage> Wert relativ zur Inline-Größe des Gittercontainers. Wenn die Größe des Gittercontainers von der Größe seiner Spuren abhängt, muss der Prozentsatz als auto behandelt werden. Die intrinsischen Größenbeiträge der Spur können an die Größe des Gittercontainers angepasst werden und die endgültige Größe der Spur um den Mindestbetrag erhöhen, der erforderlich ist, um den Prozentsatz zu beachten.

<flex>

Eine nicht-negative Dimension mit der Einheit fr, die den Flex-Faktor der Spur angibt. Jede <flex>-dimensionierte Spur nimmt einen Anteil des verbleibenden Raums proportional zu ihrem Flex-Faktor ein.

Wenn sie außerhalb einer minmax()-Notation erscheint, impliziert sie ein automatisches Minimum (d.h. minmax(auto, <flex>)).

max-content

Ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag der Gitterelemente darstellt, die die Gitterspur einnehmen. Wenn beispielsweise das erste Element der Gitterspur den Satz "Repetitio est mater studiorum" enthält und das zweite Element den Satz "Dum spiro, spero", wird der maximale Inhaltsbeitrag von der Größe des größten Satzes unter allen Gitterelementen definiert - "Repetitio est mater studiorum".

min-content

Ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Gitterelemente darstellt, die die Gitterspur einnehmen. Wenn beispielsweise das erste Element der Gitterspur den Satz "Repetitio est mater studiorum" enthält und das zweite Element den Satz "Dum spiro, spero", wird der minimale Inhaltsbeitrag von der Größe des größten Wortes unter allen Sätzen in den Gitterelementen definiert - "studiorum".

minmax(min, max)

Eine funktionale Notation, die einen Größenbereich definiert, der größer oder gleich min und kleiner oder gleich max ist. Wenn max kleiner als min ist, wird max ignoriert und die Funktion wird als min behandelt. Als Maximum bestimmt ein <flex> Wert den Flex-Faktor der Spur. Es ist ungültig als Minimum.

auto

Als Maximum stellt es die größte max-content Größe der Elemente in dieser Spur dar.

Als Minimum stellt es die größte Mindestgröße der Elemente in dieser Spur dar (spezifiziert durch die min-width/min-height der Elemente). Dies ist oft, aber nicht immer die min-content Größe.

Wenn außerhalb der minmax()-Notation verwendet, repräsentiert auto den Bereich zwischen dem oben beschriebenen Minimum und Maximum. Dies verhält sich in den meisten Fällen ähnlich wie minmax(min-content,max-content).

Note: auto Spurgrößen (und nur auto Spurgrößen) können durch die Eigenschaften align-content und justify-content gestreckt werden. Daher nimmt eine auto dimensionierte Spur standardmäßig jeden verbleibenden Platz im Gittercontainer ein.

fit-content( [ <length> | <percentage> ] )

Stellt die Formel max(minimum, min(limit, max-content)) dar, wobei minimum ein automatisches Minimum darstellt (das oft, aber nicht immer, einem min-content Minimum entspricht) und limit die Spurgroßenfunktion ist, die als Argument an fit-content() übergeben wird. Dies wird im Wesentlichen als das kleinere von minmax(auto, max-content) und minmax(auto, limit) berechnet.

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

Stellt ein wiederholtes Fragment der Spurliste dar und ermöglicht es, eine große Anzahl von Spalten, die ein wiederkehrendes Muster aufweisen, in einer kompakteren Form zu schreiben.

masonry

Der masonry-Wert gibt an, dass diese Achse gemäß dem Mauerwerksalgorithmus layoutiert werden soll.

subgrid

Der subgrid Wert gibt an, dass das Gitter den überbrückten Teil des Elterngitters in dieser Achse übernehmen wird. Anstatt explizit angegeben zu werden, werden die Größen der Gitterzeilen/-spalten aus der Definition des Elterngitters übernommen.

grid-template-columns = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<track-list> = 
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?  

<auto-track-list> = 
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?  

<line-name-list> = 
  [ <line-names> | <name-repeat> ]+  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

<fixed-breadth> = 
  <length-percentage [0,∞]>  

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

CSS

#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

Ergebnis

• grid-template-rows
• grid-template-areas
• grid-template
• Grundlegende Konzepte des Gitternetzlayouts: Gitterspuren
• Video: Definieren eines Gitters
• Subgrid