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: rgba(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 eine Spalte positioniert wird, die nicht explizit durch grid-template-columns dimensioniert ist, werden implizite grid Tracks erstellt, um es zu halten. Dies kann entweder dadurch geschehen, dass explizit in eine Spalte positioniert wird, die außerhalb des Bereichs liegt, oder durch den Auto-Platzierungsalgorithmus, 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 unbestimmt ist, wird der Prozentwert wie auto behandelt.

<flex>

Ist eine nicht-negative Dimension mit der Einheit fr, die den Flex-Faktor des Tracks angibt. Jeder <flex>-dimensionierte Track nimmt einen Anteil des verbleibenden Raums im Verhältnis zu seinem Flex-Faktor ein.

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

max-content

Ist ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag der Gitterelemente repräsentiert, die den Gitter-Track belegen.

min-content

Ist ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Gitterelemente repräsentiert, die den Gitter-Track 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 ist als min, wird max ignoriert und die Funktion wird als min behandelt. Als Maximum setzt ein <flex> Wert den Flex-Faktor des Tracks. Als Minimum wird er als null behandelt (oder als minimaler Inhalt, wenn der Gittercontainer unter einer minimalen Inhaltsbegrenzung 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 Trackgröße am Argument begrenzt wird, wenn es größer ist als das auto Minimum.

auto

Als Maximum repräsentiert die größte max-content Größe der Elemente in diesem Track.

Als Minimum repräsentiert die größte minimale Größe der Elemente in diesem Track (spezifiziert 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 oben beschriebenen Minimum und Maximum. Dies verhält sich in den meisten Fällen ä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 standardmäßig ein auto dimensionierter Track 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
• Automatische Platzierung im Gitterlayout: Zeilen in dem impliziten Gitter dimensionieren
• Video: Einführung in automatische Platzierung und Reihenfolge im Gitter