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 Raster gibt. Alle Spalten werden implizit erzeugt und ihre Größe wird durch die grid-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örtern span und auto. 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 als auto. 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 Einheit fr, 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 einer minmax() Notation erscheint, impliziert es ein automatisches Minimum (d.h. minmax(auto, <flex>)).

max-content

Ist ein Schlüsselwort, das den größten maximalen 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ößten minimalen 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 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 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ößte max-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 die min-width/min-height Eigenschaften 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 Mindest- und Maximalwerten. In den meisten Fällen verhält sich dies ähnlich wie minmax(min-content,max-content).

Hinweis: auto Spurgrößen (und nur auto Spurgrößen) können durch die align-content und justify-content Eigenschaften gedehnt werden. Daher wird eine auto-große Spur standardmäßig den verbleibenden Raum im Rastercontainer einnehmen.

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 Spurgröß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 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

Der subgrid 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 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 Rasterlayouts: Rasterspuren
• Video: Definieren eines Rasters
• Subgrid