grid-auto-columns

Probieren Sie es aus

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 Grid-Item in einer Spalte positioniert wird, die nicht explizit durch grid-template-columns dimensioniert ist, werden implizite Grid-Spuren erstellt, um es aufzunehmen. Dies kann entweder dadurch geschehen, dass explizit in eine Spalte positioniert wird, die außerhalb des Bereichs liegt, oder durch den Auto-Platzierungs-Algorithmus, der zusätzliche Spalten erstellt.

Syntax

/* Keyword values */
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;

/* <length> values */
grid-auto-columns: 100px;
grid-auto-columns: 20cm;
grid-auto-columns: 50vmax;

/* <percentage> values */
grid-auto-columns: 10%;
grid-auto-columns: 33.3%;

/* <flex> values */
grid-auto-columns: 0.5fr;
grid-auto-columns: 3fr;

/* minmax() values */
grid-auto-columns: minmax(100px, auto);
grid-auto-columns: minmax(max-content, 2fr);
grid-auto-columns: minmax(20%, 80vmax);

/* fit-content() values */
grid-auto-columns: fit-content(400px);
grid-auto-columns: fit-content(5cm);
grid-auto-columns: fit-content(20%);

/* multiple track-size values */
grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr)
  minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* Global values */
grid-auto-columns: inherit;
grid-auto-columns: initial;
grid-auto-columns: revert;
grid-auto-columns: revert-layer;
grid-auto-columns: unset;

Werte

<length>

Ist eine nicht-negative Länge.

<percentage>

Ist ein nicht-negativer <percentage>-Wert relativ zur Blockgröße des Grid-Containers. Wenn die Blockgröße des Grid-Containers unbestimmt ist, wird der Prozentwert 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 im Verhältnis zu ihrem Flex-Faktor einen Teil des verbleibenden Raums ein.

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

max-content

Ist ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag der Grid-Items, die die Grid-Spur belegen, repräsentiert.

min-content

Ist ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Grid-Items, die die Grid-Spur belegen, repräsentiert.

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 Flex-Faktor der Spur. Als Minimum wird es als null (oder als minimaler Inhalt, wenn der Grid-Container 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 (d.h. minmax(auto, max-content)) berechnet wird, 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 Items in dieser Spur.

Als Minimum repräsentiert es die größte Mindestgröße der Items in dieser Spur (spezifiziert durch die min-width/min-height der Items). Dies ist oft, aber nicht immer, die min-content-Größe.

Wenn außerhalb einer 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-Spurgrößen (und nur auto-Spurgrößen) können durch die align-content und justify-content-Eigenschaften gestreckt werden. Daher nimmt eine auto-dimensionierte Spur standardmäßig jeden verbleibenden Raum im Grid-Container ein.

Formale Definition

Formale Syntax

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>  

Beispiele

Einstellung der Grid-Spaltengröße

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• grid-auto-rows
• grid-auto-flow
• grid
• Automatische Platzierung im Grid-Layout: Zeilen in der impliziten Grid dimensionieren
• Video: Vorstellung der automatischen Grid-Platzierung und Reihenfolge