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 CSS-Eigenschaft grid-template-columns definiert die Liniennamen und die Größenfunktionen der Grid Spalten.

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: rgba(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

Bedeutet, dass es kein explizites Grid gibt. Alle 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 Stelle angibt. Der Identifikator kann jede gültige Zeichenfolge außer den reservierten Wörtern span und auto sein. Linien können mehrere Namen haben, die durch ein Leerzeichen in den eckigen Klammern 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 Grid-Containers. Wenn die Größe des Grid-Containers von der Größe seiner Tracks abhängt, muss der Prozentsatz als auto behandelt werden. Die intrinsischen Größenbeiträge des Tracks können an die Größe des Grid-Containers angepasst werden und die endgültige Größe des Tracks um den minimalen Betrag erhöhen, der erforderlich ist, um den Prozentsatz zu berücksichtigen.

<flex>

Ist eine nicht-negative Dimension mit der Einheit fr, die den Flex-Faktor des Tracks angibt. Jeder <flex>-Track nimmt einen Anteil des verbleibenden Platzes im Verhältnis zu seinem Flex-Faktor ein.

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

max-content

Ist ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag der Grid-Elemente darstellt, die den Grid-Track belegen. Beispielsweise, wenn das erste Element des Grid-Tracks den Satz "Repetitio est mater studiorum" und das zweite Element den Satz "Dum spiro, spero" enthält, wird der maximale Inhaltsbeitrag durch die Größe des größten Satzes unter allen Grid-Elementen definiert - "Repetitio est mater studiorum".

min-content

Ist ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Grid-Elemente darstellt, die den Grid-Track belegen. Zum Beispiel, wenn das erste Element des Grid-Tracks den Satz "Repetitio est mater studiorum" und das zweite Element den Satz "Dum spiro, spero" enthält, wird der minimale Inhaltsbeitrag durch die Größe des größten Wortes unter allen Sätzen in den Grid-Elementen definiert - "studiorum".

minmax(min, max)

Ist 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 des Tracks. Es ist ungültig als Minimum.

auto

Als Maximum repräsentiert es die größte max-content Größe der Elemente in diesem Track.

Als Minimum repräsentiert es die größte Mindestgröße der Elemente in diesem Track (angegeben durch die min-width/min-height der Elemente). Dies ist oft, wenn auch 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).

Hinweis: auto-Trackgrößen (und nur auto-Trackgrößen) können durch die Eigenschaften align-content und justify-content gestreckt werden. Daher nimmt ein auto-Track standardmäßig den verbleibenden Platz im Grid-Container ein.

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

Repräsentiert die Formel max(minimum, min(limit, max-content)), wobei minimum ein auto-Minimum darstellt (das oft, aber nicht immer, gleich einem min-content Minimum ist), und limit ist die Trackgrößenfunktion, die als Argument zu 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> )

Repräsentiert ein wiederholtes Fragment der Trackliste, das es ermöglicht, eine große Anzahl von Spalten, die ein wiederkehrendes Muster aufweisen, in kompakter Form zu schreiben.

masonry

Der Wert masonry zeigt an, dass diese Achse gemäß dem Masonry-Algorithmus ausgelegt werden soll.

subgrid

Der Wert subgrid zeigt an, dass das Grid den überspannten Teil seines übergeordneten Grids in dieser Achse übernimmt. Anstatt explizit angegeben zu werden, werden die Größen der Grid-Reihen/Spalten aus der Definition des übergeordneten Grids ü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

Größen von Grid-Spalten festlegen

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