grid-template-columns

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

/* 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 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. Das Identifikationsmerkmal kann jede gültige Zeichenkette sein, außer den reservierten Wörtern span und auto. 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, der sich auf die Inline-Größe des Grid-Containers bezieht. Wenn die Größe des Grid-Containers von der Größe seiner Tracks abhängt, behandelt der Browser den Prozentsatz als auto. Der Browser kann die intrinsischen Größenbeiträge des Tracks zur Größe des Grid-Containers anpassen und die endgültige Größe des Tracks um den Mindestbetrag erhöhen, der erforderlich ist, um dem Prozentsatz gerecht zu werden.

<flex>

Ist eine nicht-negative Dimension mit der Einheit fr, die den Flex-Faktor des Tracks spezifiziert. Jeder <flex>-Track nimmt einen Anteil des verbleibenden Raums proportional 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. Zum Beispiel, wenn das erste Element des Grid-Tracks 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 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" enthält und das zweite Element den Satz "Dum spiro, spero", wird der minimale Inhaltsbeitrag durch die Größe des größten Wortes in allen Sätzen der Grid-Elemente 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 behandelt es als min. Als Maximum legt ein <flex>-Wert den Flex-Faktor des Tracks fest. Er ist als Minimum ungültig.

auto

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

Als Minimalwert repräsentiert er die größte Mindestgröße der Elemente in diesem Track (spezifiziert durch die Eigenschaften min-width/min-height der Elemente). Dies entspricht oft der min-content-Größe, aber nicht immer.

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

Hinweis:>auto-Track-Größen (und nur auto-Track-Größen) können durch die Eigenschaften align-content und justify-content gestreckt werden. Daher nimmt ein auto-größter Track standardmäßig jeden 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 repräsentiert (was oft, aber nicht immer, gleich einem min-content-Minimum ist), und limit die Track-Größ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> )

Repräsentiert ein wiederholtes Fragment der Track-Liste und ermöglicht es, eine große Anzahl von Spalten, die ein wiederkehrendes Muster aufweisen, in einer kompakteren Form zu schreiben.

masonry

Der Wert masonry gibt an, dass diese Achse gemäß dem Masonry-Algorithmus gelayoutet werden sollte.

subgrid

Der Wert subgrid gibt an, dass das Grid den überlappenden Teil des ü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

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

Spezifizierung der Grid-Spaltengrößen

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• grid-template-rows
• grid-template-areas
• grid-template
• Grundkonzepte des Grid-Layouts: Grid-Tracks
• Video: Defining a grid
• Subgrid