Diegrid-template-columnsCSS Eigenschaft definiert die Liniennamen und Spurgrößenfunktionen derRasterspalten.

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>  <div>    <div>      <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 Raster gibt. Alle Spalten werden implizit erzeugt und ihre Größe wird durch diegrid-auto-columns Eigenschaft bestimmt.

[line-name]

Ein<custom-ident>, das einen Namen für die Linie an dieser Stelle angibt. Der Identifikator kann ein beliebiger gültiger String sein, außer den reservierten Wörternspan undauto. Linien können mehrere Namen haben, die innerhalb der eckigen Klammern durch ein Leerzeichen 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 Rastercontainers. Wenn die Größe des Rastercontainers von der Größe seiner Spuren abhängt, behandelt der Browser den Prozentsatz alsauto.Der Browser kann die intrinsischen Größenbeiträge der Spur zur Größe des Rastercontainers anpassen und die endgültige Größe der Spur um den minimalen Betrag erhöhen, der erforderlich ist, um den Prozentsatz zu berücksichtigen.

<flex>

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

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

max-content

Ist ein Schlüsselwort, das den größtenmaximalen Inhaltsbeitrag der Rasterelemente repräsentiert, die die Rasterspur belegen. Wenn beispielsweise 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

Ist ein Schlüsselwort, das den größtenminimalen Inhaltsbeitrag der Rasterelemente repräsentiert, die die Rasterspur belegen. Wenn beispielsweise 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 Wortes unter allen Sätzen in den Rasterelementen definiert -"studiorum".

minmax(min, max)

Ist eine funktionale Notation, die einen Größenbereich definiert, der größer oder gleichmin und kleiner oder gleichmax ist. Wennmax kleiner alsmin ist, wirdmax ignoriert und die Funktion wird alsmin behandelt. Als ein Maximum setzt ein<flex> Wert den Flexfaktor der Spur. Er ist ungültig als Minimum.

auto

Als maximaler Wert repräsentiert er die größtemax-content Größe der Elemente in dieser Spur.

Als minimaler Wert repräsentiert er die größte Mindestgröße von Elementen in dieser Spur (angegeben durch diemin-width/min-height Eigenschaften der Elemente). Dies entspricht oft dermin-content Größe, aber nicht immer.

Wenn außerhalb derminmax() Notation verwendet, repräsentiertauto den Bereich zwischen den oben beschriebenen Mindest- und Maximalwerten. In den meisten Fällen verhält sich dies ähnlich wieminmax(min-content,max-content).

Hinweis:auto Spurgrößen (und nurauto Spurgrößen) können durch diealign-content undjustify-content Eigenschaften gedehnt werden. Daher wird eineauto-große Spur standardmäßig den verbleibenden Raum im Rastercontainer einnehmen.

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

Repräsentiert die Formelmax(minimum, min(limit, max-content)), wobeiminimum einauto Minimum darstellt (das oft, aber nicht immer, einemmin-content Minimum entspricht), undlimit die Spurgrößenfunktion ist, die als Argument an fit-content() übergeben wird. Dies wird im Wesentlichen als das kleinere vonminmax(auto, max-content) undminmax(auto, limit) berechnet.

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

Repräsentiert ein wiederholtes Fragment der Spurliste, 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 gemäß dem Masonry-Algorithmus ausgelegt werden sollte.

subgrid

Dersubgrid Wert gibt an, dass das Raster den überlappenden Bereich seines übergeordneten Rasters auf dieser Achse übernehmen wird. Anstatt explizit angegeben zu werden, werden die Größen der Rasterreihen/Spalten aus der Definition des übergeordneten Rasters ü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

Spezifizieren der Größen von Rasterspalten

HTML

<div>  <div>A</div>  <div>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 Rasterlayouts: Rasterspuren
• Video:Definieren eines Rasters
• Subgrid