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 kein explizites Grid existiert. 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 diesem Ort angibt. Der Identifikator kann jede gültige Zeichenfolge sein, außer den reservierten Wörtern span und auto. Linien können mehrere durch Leerzeichen getrennte Namen in den eckigen Klammern haben, 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 Grid-Containers. 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 minimalen Betrag erhöhen, der zur Einhaltung des Prozentsatzes erforderlich ist.

<flex>

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

Bei Auftreten außerhalb einer minmax()-Notation impliziert es ein automatisches Minimum (d.h. minmax(auto, <flex>)).

max-content

Ist ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag der die Grid-Spur besetzenden Grid-Elemente darstellt. Beispielsweise, wenn das erste Element der Grid-Spur 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 die Grid-Spur besetzenden Grid-Elemente darstellt. Beispielsweise, wenn das erste Element der Grid-Spur 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 größer oder gleich min und kleiner oder gleich max definiert. 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 als Minimum ungültig.

auto

Als Maximalwert stellt es die größte max-content-Größe der Elemente in diesem Track dar.

Als Minimalwert stellt es die größte Mindestgröße der Elemente in diesem Track dar (angegeben durch die min-width/min-height-Eigenschaften der Elemente). Dies entspricht oft der min-content-Größe, aber nicht immer.

Wenn es außerhalb der minmax()-Notation verwendet wird, stellt auto den Bereich zwischen den oben beschriebenen Minimal- und Maximalwerten dar. In den meisten Fällen verhält sich dies ä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 gedehnt werden. Daher nimmt ein auto-größer Track standardmäßig jeglichen verbleibenden Platz im Grid-Container ein.

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

Stellt die Formel max(minimum, min(limit, max-content)) dar, wobei minimum ein auto Minimum darstellt (das oft, aber nicht immer, einem min-content Minimum entspricht) und limit die Tracks-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> )

Stellt ein wiederholtes Fragment der Trackliste dar und ermöglicht eine große Anzahl von Spalten, die ein sich wiederholendes Muster aufweisen, in kompakterer Form zu schreiben.

masonry

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

subgrid

Der subgrid-Wert gibt an, dass das Grid den überdeckten Abschnitt des übergeordneten Grids in diese Achse übernimmt. Anstatt explizit festgelegt zu werden, werden die Größen der Gridzeilen/-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

Festlegung 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