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 Gitterelement in einer Spalte positioniert ist, die nicht explizit durch grid-template-columns dimensioniert ist, werden implizite Gitter-Spuren erstellt, um es zu halten. Dies kann entweder durch explizites Positionieren in eine Spalte außerhalb des Bereichs geschehen oder durch den Auto-Placement-Algorithmus, der zusätzliche Spalten erstellt.

<length>

Ist eine nicht-negative Länge.

<percentage>

Ist ein nicht-negativer <percentage>-Wert relativ zur Blockgröße des Gittercontainers. Wenn die Blockgröße des Gittercontainers undefiniert 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 entsprechend ihrem Flexfaktor einen Anteil des verbleibenden Platzes ein.

Wenn es 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 Gitterelemente darstellt, die die Gitterspur belegen.

min-content

Ist ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Gitterelemente darstellt, die die Gitterspur 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 legt ein <flex>-Wert den Flexfaktor der Spur fest. Als Minimum wird es als null behandelt (oder minimaler Inhalt, wenn der Gittercontainer unter einem Minimalinhalts-Zwang dimensioniert ist).

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 Spurengröße bei argument abgeblockt 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 Mindestgröße von Elementen in dieser Spur (angegeben durch die min-width/min-height der Elemente). Dies ist oft, aber nicht immer, die min-content-Größe.

Wenn es 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).

Hinweis: auto-Spurgrößen (und nur auto-Spurgrößen) können durch die Eigenschaften align-content und justify-content gestreckt werden. Daher nimmt eine auto-dimensionierte Spur standardmäßig jeden verbleibenden Raum im Gittercontainer 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
• Auto-Placement im Gitterlayout: Zeilen in der impliziten Gitter zu dimensionieren
• Video: Einstieg in die automatische Platzierung und Reihenfolge im Gitterlayout