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 Rasterelement in eine Spalte positioniert wird, die nicht explizit durch grid-template-columns dimensioniert ist, werden implizite Raster Spuren erstellt, um es aufzunehmen. Dies kann entweder durch explizite Positionierung in einer Spalte erfolgen, die außerhalb des Bereichs liegt, oder durch den Autoplatzierungs-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 Rastercontainers. Wenn die Blockgröße des Rastercontainers unbestimmt ist, wird der Prozentsatzwert wie auto behandelt.

<flex>

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

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

max-content

Ist ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag der Rasterelemente darstellt, die die Rasterspur einnehmen.

min-content

Ist ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Rasterelemente darstellt, die die Rasterspur einnehmen.

minmax(min, max)

Ist eine funktionale Notation, die einen Größenbereich größer oder gleich min und kleiner oder gleich max definiert. Wenn max kleiner als min ist, wird max ignoriert und die Funktion als min behandelt. Als Maximum setzt ein <flex> Wert den Flex-Faktor der Spur. Als Minimum wird es als Null behandelt (oder als minimaler Inhalt, wenn der Rastercontainer unter einer minimalen Inhaltsbeschränkung dimensioniert ist).

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

Stellt die Formel min(max-content, max(auto, argument)) dar, die ähnlich wie auto berechnet wird (d.h. minmax(auto, max-content)), außer dass die Spurgröße am argument geklemmt 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 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 es außerhalb der minmax() Notation verwendet wird, stellt auto den Bereich zwischen dem oben beschriebenen Minimum und Maximum dar. Dies verhält sich in den meisten Fällen ähnlich wie minmax(min-content,max-content).

Note: 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 den verbleibenden Platz 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 Rasternetz: Größenänderung von Zeilen im impliziten Raster
• Video: Einführung in automatische Rasterplatzierung und -reihenfolge