grid-template-columns

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

* Some parts of this feature may have varying levels of support.

Die grid-template-columns CSS-Eigenschaft definiert die Liniennamen und Spurgrößenfunktionen der Gitterspalten.

Probieren Sie es aus

grid-template-columns: 60px 60px;

grid-template-columns: 1fr 60px;

grid-template-columns: 1fr 2fr;

grid-template-columns: 8ch auto;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 200px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Syntax

css

/* Keyword value */
grid-template-columns: none;

/* <track-list> values */
grid-template-columns: 100px 1fr;
grid-template-columns: [line-name] 100px;
grid-template-columns: [line-name1] 100px [line-name2 line-name3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);
grid-template-columns: subgrid;
grid-template-columns: masonry;

/* <auto-track-list> values */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-columns:
  [line-name1] 100px [line-name2]
  repeat(auto-fit, [line-name3 line-name4] 300px)
  100px;
grid-template-columns:
  [line-name1 line-name2] 100px
  repeat(auto-fit, [line-name1] 300px) [line-name3];

/* Global values */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: revert;
grid-template-columns: revert-layer;
grid-template-columns: unset;

Werte

none

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

[line-name]

Ein <custom-ident>, das einen Namen für die Linie an dieser Stelle angibt. Das Identifikat kann jede gültige Zeichenkette sein, außer den reservierten Wörtern span und auto. Linien können mehrere Namen haben, die in den eckigen Klammern durch ein Leerzeichen getrennt sind, zum Beispiel [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 minimalen Betrag erhöhen, der erforderlich ist, um den Prozentsatz zu berücksichtigen.

<flex>

Eine nicht-negative Dimension mit der Einheit fr, die den Flex-Faktor der Spur angibt. Jede <flex>-größte Spur nimmt einen Anteil des verbleibenden Raums im Verhältnis zu ihrem Flex-Faktor ein.

Wenn es außerhalb einer minmax()-Notation erscheint, impliziert es 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. Zum Beispiel, wenn 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 durch die Größe des größten Satzes aller Gitterelemente definiert - "Repetitio est mater studiorum".

min-content

Ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Gitterelemente darstellt, die die Gitterspur einnehmen. Zum Beispiel, wenn 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 durch die Größe des größten Wortes aller Sätze 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 als min behandelt. Als Maximum setzt ein <flex>-Wert den Flex-Faktor der Spur. Es ist als Minimum ungültig.

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, stellt auto den Bereich zwischen dem oben beschriebenen Minimum und Maximum dar. Dies verhält sich in den meisten Fällen ähnlich wie minmax(min-content,max-content).

Hinweis: auto-Spurgrößen (und nur auto-Spurgrößen) können durch die Eigenschaften align-content und justify-content gedehnt werden. Daher wird eine auto-große Spur standardmäßig jeden verbleibenden Raum im Gittercontainer einnehmen.

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

Stellt die Formel max(minimum, min(limit, max-content)) dar, wobei minimum ein auto-Minimum repräsentiert (was oft, aber nicht immer einem min-content-Minimum entspricht) und limit die Spurgrößenfunktion ist, die als Argument an fit-content() übergeben wird. Dies wird im Wesentlichen als das Kleinere aus 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 mit einem sich wiederholenden Muster in kompakterer Form zu schreiben.

masonry

Der masonry-Wert gibt an, dass diese Achse gemäß dem Mauerwerks-Algorithmus angeordnet werden soll.

subgrid

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

Formale Definition

Anfangswert	`none`
Anwendbar auf	Gridcontainer
Vererbt	Nein
Prozentwerte	beziehen sich auf die entsprechende Dimension des Inhaltsbereichs
Berechneter Wert	relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
Animationstyp	simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list

Formale Syntax

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,∞]>

Beispiele

Spezifizieren der Gitterspaltengrößen

HTML

html

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

CSS

css

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

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

Ergebnis

Spezifikationen

Specification
CSS Grid Layout Module Level 2 # track-sizing
CSS Grid Layout Module Level 2 # subgrids