W3docs
de
Anmelden

CSS grid-auto-columns Eigenschaft

Verwende die CSS-Eigenschaft grid-auto-columns, um die Größe von Spalten festzulegen. Werte und Beispiele erklärt.

Die Eigenschaft grid-auto-columns legt die Größe implizit erstellter Grid-Spalten fest – also Spalten, die der Browser automatisch erzeugt, wenn Grid-Elemente außerhalb der explizit mit grid-template-columns definierten Spalten platziert werden.

Warum das wichtig ist: Beim Aufbau eines Grids deklariert man in der Regel eine feste Anzahl von Tracks. Wenn ein Element jedoch in einer Spalte landet, die noch nicht existiert (zum Beispiel, wenn ein Element bei grid-column: 5 in einem 3-spaltigen Grid platziert wird), erstellt CSS Grid diese zusätzliche Spalte automatisch. Standardmäßig haben diese automatisch generierten Spalten die Größe auto, was sie oft auf die Breite des Inhalts schrumpfen lässt. Mit grid-auto-columns lässt sich steuern, wie breit sie sein sollen.

Hinweis: Diese Eigenschaft betrifft nur implizit erstellte Spalten, nicht explizit definierte. Um die vorab deklarierten Spalten zu dimensionieren, verwendet man stattdessen grid-template-columns. Das Zeilenäquivalent ist grid-auto-rows.

Wann werden implizite Spalten erstellt?

Implizite Spalten entstehen in zwei häufigen Situationen:

  • Ein Element wird über die letzte explizite Spaltenlinie hinaus positioniert (z. B. grid-column-start: 4 bei nur 3 definierten Spalten).
  • Das Grid verwendet grid-auto-flow: column, sodass neue Elemente in neu erstellte Spalten statt in Zeilen fließen.

In beiden Fällen erben die neuen Spalten ihre Breite von grid-auto-columns.

Anfangswertauto
Gilt fürGrid-Container.
VererbbarNein.
AnimierbarJa. Die Größe der Spalten ist animierbar.
VersionCSS Grid Layout Module Level 1
DOM-Syntaxobject.style.gridAutoColumns = "100px";

Syntax

Syntax der CSS grid-auto-columns Eigenschaft

grid-auto-columns: auto | max-content | min-content | length | % | minmax(min, max);

Beispiel für grid-auto-columns:

Beispiel der CSS grid-auto-columns Eigenschaft mit auto- und Längenwerten

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-auto-columns: 50px;
        gap: 10px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .black-container {
        display: grid;
        grid-auto-columns: 100px;
        gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .black-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .auto-container {
        display: grid;
        grid-auto-columns: auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #999;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-columns property example</h2>
    <h3>50 pixels</h3>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>100 pixels</h3>
    <div class="black-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS grid-auto-columns Eigenschaft

Im folgenden Beispiel wird die Eigenschaft grid-auto-columns verwendet, um eine Standardgröße (Breite) für alle Spalten festzulegen.

Beispiel für grid-auto-columns mit allen Werten:

Beispiel der CSS grid-auto-columns Eigenschaft mit max-content-, min-content-, auto- und Längenwerten

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-auto-columns: 50px;
        gap: 10px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .black-container {
        display: grid;
        grid-auto-columns: 100px;
        gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .black-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .grey-container {
        display: grid;
        grid-auto-columns: max-content;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grey-container > div {
        background-color: #555;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .white-container {
        display: grid;
        grid-auto-columns: min-content;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .white-container > div {
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .auto-container {
        display: grid;
        grid-auto-columns: auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #999;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .minmax-container {
        display: grid;
        grid-auto-columns: minmax(50px, 1fr);
        gap: 10px;
        background-color: #eee;
        padding: 10px;
      }
      .minmax-container > div {
        background-color: #777;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-columns property example</h2>
    <p>Use the grid-auto-columns property to set a default size (width) for all columns.</p>
    <h3>50 pixels</h3>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>100 pixels</h3>
    <div class="black-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>max-content</h3>
    <div class="grey-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>min-content</h3>
    <div class="white-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>minmax(50px, 1fr)</h3>
    <div class="minmax-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibung
autoDie Größe der Spalten wird durch den Inhalt oder den verfügbaren Platz bestimmt. Dies ist der Standardwert der Eigenschaft.
max-contentDie Größe jeder Spalte wird durch den größten min-content-Beitrag ihrer Elemente bestimmt.
min-contentDie Größe jeder Spalte wird durch den kleinsten min-content-Beitrag ihrer Elemente bestimmt.
minmax(min, max)Der Größenbereich ist größer oder gleich „min" und kleiner oder gleich „max".
lengthDie Größe der Spalten wird durch einen Längenwert angegeben.
%Die Größe der Spalten wird in Prozent angegeben.

Es kann auch eine leerzeichengetrennte Liste von Größen übergeben werden (zum Beispiel grid-auto-columns: 100px 200px). Die Liste wiederholt sich der Reihe nach für jede neue implizite Spalte.

Verwandte Eigenschaften

  • grid-auto-rows — dasselbe Konzept für implizit erstellte Zeilen.
  • grid-auto-flow — steuert, ob automatisch platzierte Elemente neue Zeilen oder Spalten erzeugen.
  • grid-template-columns — definiert die expliziten Spalten.
  • grid — die Kurzschreibweise, die die Grid-Layout-Eigenschaften zusammenfasst.

Übung

Übung
Was bewirkt die Eigenschaft 'grid-auto-columns' in CSS?
Was bewirkt die Eigenschaft 'grid-auto-columns' in CSS?
Was this page helpful?