Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >column-count

column-count

column-count: auto | Zahl

Teilt den Inhalt in eine angegebene Zahl gleich breiter Spalten. Den Abstand zwischen ihnen setzt column-gap (der Standard normal ist 1em), eine Linie dazwischen column-rule. Ist auch column-width gesetzt, ist die Anzahl nur eine Obergrenze.

Werte

  • auto – die Anzahl bestimmt column-width; ohne sie gibt es keine Spalten.
  • 3 – drei Spalten (eine positive ganze Zahl).

Initialwert: auto. Vererbt: nein. Gilt für: Blockcontainer (keine Tabellen).

Beispiele

Eine Linkliste in der Fußzeile, auf drei Spalten verteilt:

<ul class="links">
  <li>Über uns</li>
  <li>Kontakt</li>
  <li>Preisliste</li>
  <li>Versand</li>
  <li>Rückgabe</li>
  <li>AGB</li>
</ul>

.links {
  column-count: 3;
  max-width: 360px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.links li { padding: 2px 0; }
Ergebnis
  • Über uns
  • Kontakt
  • Preisliste
  • Versand
  • Rückgabe
  • AGB

Worauf Sie achten sollten

  • Eine feste Spaltenzahl passt sich der Breite nicht an: Drei Spalten auf einem Handy sind schmal. Für eine veränderliche Breite ist columns: 160px oder @media besser.
  • Hat das Element eine feste Höhe, bildet Inhalt, der nicht in die angegebene Spaltenzahl passt, weitere Spalten rechts – außerhalb des Elements.
  • Der Standardabstand zwischen Spalten ist 1em (column-gap: normal), nicht null wie im Grid.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit März 2017, gilt als weithin verfügbar seit September 2019. Ab Version: Chrome 50, Firefox 52, Safari 9. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
columns
column-rule
break-inside
gap
list-style