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 Lininamen und Größensteuerungsfunktionen der Rasterspalten.

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

Gibt an, dass kein explizites Raster vorhanden ist. 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 Ident darf jede gültige Zeichenkette außer den reservierten Wörtern span und auto sein. Linien können mehrere Namen haben, die innerhalb der eckigen Klammern durch ein Leerzeichen getrennt sind, 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 Rastercontainers. Wenn die Größe des Rastercontainers 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 Rastercontainers angepasst werden und die endgültige Größe der Spur um den minimalen Betrag erhöhen, der zur Einhaltung des Prozentsatzes erforderlich ist.

<flex>

Eine nicht-negative Dimension mit der Einheit fr, die den Flexfaktor der Spur angibt. Jede <flex>-große Spur nimmt einen Anteil des verbleibenden Platzes im Verhältnis zu ihrem Flexfaktor ein.

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

max-content

Ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag der Rasterelemente, die die Rasterspur einnehmen, repräsentiert. Wenn zum Beispiel das erste Element der Rasterspur 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 Rasterelementen definiert - "Repetitio est mater studiorum".

min-content

Ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Rasterelemente, die die Rasterspur einnehmen, repräsentiert. Wenn zum Beispiel das erste Element der Rasterspur 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 Worts unter allen Sätzen in den Rasterelementen definiert - "studiorum".

minmax(min, max)

Eine Funktionsnotation, 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 Flexfaktor der Spur. Es ist als Minimum ungültig.

auto

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

Als Minimum repräsentiert es die größte Mindestgröße der Elemente in dieser Spur (angegeben durch die min-width/min-height der Elemente). Dies ist oft, aber nicht immer, die min-content Größe.

Wenn sie außerhalb der minmax()-Notation verwendet wird, 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).

Note: auto Spurgrößen (und nur auto Spurgrößen) können durch die Eigenschaften align-content und justify-content gestreckt werden. Daher nimmt eine Spur mit der Größe auto standardmäßig den verbleibenden Platz im Rastercontainer 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, einem min-content Minimum entspricht), und limit die Größensteuerungsfunktion der Spur 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 Spurenliste, das es ermöglicht, eine große Anzahl von Spalten, die ein sich wiederholendes Muster aufweisen, in einer kompakteren Form zu schreiben.

masonry

Der Masonry-Wert gibt an, dass diese Achse entsprechend dem Masonry-Algorithmus angeordnet werden soll.

subgrid

Der subgrid-Wert gibt an, dass das Raster den überspannten Teil seines übergeordneten Rasters auf dieser Achse übernehmen wird. Anstatt explizit angegeben zu werden, werden die Größen der Rasterzeilen/-spalten aus der Definition des übergeordneten Rasters übernommen.

Formale Definition

Anfangswertnone
Anwendbar aufGridcontainer
VererbtNein
Prozentwertebeziehen sich auf die entsprechende Dimension des Inhaltsbereichs
Berechneter Wertrelativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
Animationstypsimple 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

Spezifizierung der Rasterspaltengröß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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch