grid-auto-columns CSS property

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 Gitterelement in eine Spalte positioniert wird, die nicht explizit durch grid-template-columns dimensioniert ist, werden implizite grid Tracks erstellt, um es aufzunehmen. Dies kann entweder dadurch geschehen, dass es explizit in eine Spalte positioniert wird, die außerhalb des Bereichs liegt, oder durch den Algorithmus zur automatischen Platzierung, 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 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 spezifiziert. Jeder <flex>-dimensionierte Track nimmt einen Anteil des verbleibenden Raums im Verhältnis zu seinem Flex-Faktor ein.

Wenn es außerhalb einer minmax()-Notierung 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 den Gitter-Track einnehmen.

min-content

Ist ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Gitterelemente darstellt, die den Gitter-Track einnehmen.

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 des Tracks. Als Minimum wird es als Null behandelt (oder als minimaler Inhalt, wenn der Gittercontainer unter einer minimalen Inhaltsbeschränkung dimensioniert wird).

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 Track-Größe auf argument begrenzt wird, wenn es größer als das auto-Minimum ist.

auto

Als Maximum stellt es die größte max-content Größe der Elemente in diesem Track dar.

Als Minimum stellt es die größte Mindestgröße der Elemente in diesem Track dar (spezifiziert 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()-Notierung 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).

Hinweis: auto Track-Größen (und nur auto Track-Größen) können durch die Eigenschaften align-content und justify-content gestreckt werden. Daher wird ein auto dimensionierter Track standardmäßig jeden verbleibenden Raum im Gittercontainer einnehmen.

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

Festlegen der Gitterspaltengröß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 Gitterlayout: Dimensionierung von Zeilen im impliziten Gitter
• Video: Einführung in die automatische Platzierung und Reihenfolge im Gitter