grid-template-columns CSS property

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;

/* <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 grid-auto-columns-Eigenschaft bestimmt.

[line-name]

Ein <custom-ident> der einen Namen für die Linie an dieser Stelle angibt. Das Identifikationszeichen kann jeder gültige String sein, außer den reservierten Wörtern span und auto. Linien können mehrere Namen haben, die durch ein Leerzeichen innerhalb der 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, 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 das Minimum erhöhen, das erforderlich wäre, um dem Prozentsatz Rechnung zu tragen.

<flex>

Ist eine nicht-negative Dimension mit der Einheit fr, die den Flex-Faktor des Tracks angibt. Jeder <flex>-größe Track nimmt einen Anteil des verbleibenden Raums proportional zu seinem Flex-Faktor ein.

Wenn außerhalb einer minmax()-Notation verwendet, impliziert es 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 einnehmen. 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 einnehmen. 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 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 wird als min behandelt. Als Maximum setzt ein <flex>-Wert den Flex-Faktor des Tracks. Es ist als Minimum ungültig.

auto

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

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

Wenn es außerhalb der minmax()-Notation verwendet wird, repräsentiert auto den Bereich zwischen den oben beschriebenen Minimal- und Maximalwerten. In den meisten Fällen verhält sich dies ä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öße-Track standardmäßig den verbleibenden Raum 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 häufig, aber nicht immer einem min-content-Minimum entspricht), 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, das eine große Anzahl von Spalten ermöglicht, die ein wiederkehrendes Muster aufweisen und in kompakterer Form geschrieben werden können.

subgrid

Der subgrid-Wert gibt an, dass das Grid den überspannten Teil des übergeordneten Grids in dieser Achse übernimmt. Anstatt explizit festgelegt 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>? <track-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>  

<integer> = 
  <number-token>  

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

Beispiele

Festlegen von 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: Definieren eines Grids
• Subgrid