grid-auto-columns

grid-auto-columns: auto;

grid-auto-columns: 1fr;

grid-auto-columns: min-content;

grid-auto-columns: minmax(10px, 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></div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

#example-element > div:nth-child(1) {
  grid-column: 1 / 3;
}

#example-element > div:nth-child(2) {
  grid-column: 2;
}

Wenn ein Rasterelement in eine Spalte positioniert wird, die nicht explizit durch grid-template-columns dimensioniert ist, werden implizite grid Spuren erstellt, um es aufzunehmen. Dies kann entweder durch explizite Positionierung in einer Spalte, die außerhalb des Bereichs liegt, oder durch den Algorithmus der automatischen Platzierung geschehen, der zusätzliche Spalten erstellt.

<length>

Ist eine nicht-negative Länge.

<percentage>

Ist ein nicht-negativer <percentage> Wert relativ zur Blockgröße des Rastercontainers. Wenn die Blockgröße des Rastercontainers unbestimmt ist, wird der Prozentwert wie auto behandelt.

<flex>

Ist eine nicht-negative Dimension mit der Einheit fr, die den Flexfaktor der Spur angibt. Jede <flex>-dimensionierte Spur nimmt einen Anteil des verbleibenden Raums proportional zu ihrem Flexfaktor ein.

Wenn außerhalb einer minmax()-Notation vorkommend, impliziert dies 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.

min-content

Ist ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Rasterelemente repräsentiert, die die Rasterspur belegen.

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 Flexfaktor der Spur. Als Minimum wird er als Null (oder minimaler Inhalt, wenn der Rastercontainer unter einer minimalen Inhaltsbeschränkung dimensioniert wird) behandelt.

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

Repräsentiert die Formel min(max-content, max(auto, argument)), die ähnlich wie auto berechnet wird (d.h. minmax(auto, max-content)), außer dass die Spurgröße bei argument abgeschnitten wird, wenn sie größer als das auto Minimum ist.

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 minimale Größ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 außerhalb der minmax()-Notation verwendet, repräsentiert auto den Bereich zwischen dem Minimum und Maximum, das oben beschrieben wurde. 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 gestreckt werden. Daher nimmt eine Spur mit der Größe auto standardmäßig jeden verbleibenden Raum im Rastercontainer ein.

grid-auto-columns = 
  <track-size>+  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<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>  

HTML

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS

#grid {
  height: 100px;
  display: grid;
  grid-template-areas: "a a";
  gap: 10px;
  grid-auto-columns: 200px;
}

#grid > div {
  background-color: lime;
}

Ergebnis

• grid-auto-rows
• grid-auto-flow
• grid
• Automatische Platzierung im Rasterlayout: Dimensionierung der Zeilen im impliziten Raster
• Video: Einführung in die automatische Platzierung und Reihenfolge im Raster