CSS column-count Eigenschaft

Die Eigenschaft column-count gibt an, in wie viele Spalten der Inhalt eines Elements aufgeteilt wird. Sie ist Teil des CSS-Moduls für mehrspaltiges Layout, das es ermöglicht, einen einzelnen Inhaltsblock automatisch über mehrere Spalten fließen zu lassen – ähnlich wie in einer Zeitung oder Zeitschrift – ohne das Markup manuell aufteilen zu müssen.

Diese Seite erklärt, was column-count bewirkt, seine Syntax und zulässigen Werte, ausführbare Beispiele, das Zusammenspiel mit anderen Spalteneigenschaften sowie häufige Fallstricke.

Was `column-count` bewirkt

column-count akzeptiert eine positive ganze Zahl oder das Schlüsselwort auto. auto ist der Standardwert.

Bei einem numerischen Wert (z. B. 3) versucht der Browser, den Inhalt in genau so viele gleich breite Spalten aufzuteilen.
Bei auto wird die Anzahl der Spalten durch andere Eigenschaften bestimmt – vor allem durch column-width. Wenn weder column-count noch column-width gesetzt ist, wird der Inhalt als eine einzige Spalte dargestellt.

Wenn sowohl column-count als auch column-width gesetzt sind, wirkt column-count als Maximum: Der Browser fügt so viele Spalten mit mindestens column-width ein, wie es der Platz erlaubt, aber nie mehr als column-count. Diese Kombination ist das empfohlene responsive Muster, und die Kurzschreibweise columns setzt beide Werte gleichzeitig.

Wann sollte ich es verwenden?

Mehrspaltiges Layout eignet sich besonders für lange, zusammenhängende Lesetexte – Artikel, AGB-Seiten, Linklisten – bei denen der Inhalt die verfügbare Breite in ausgewogenen Spalten ausfüllen soll. Es ist kein universelles Raster: Für zweidimensionale Seitenlayouts sollte stattdessen CSS Grid oder Flexbox verwendet werden.

Anfangswert	auto
Gilt für	Blockcontainer außer Tabellen-Wrapper-Boxen.
Vererbung	Nein.
Animierbar	Ja. Die Spaltenanzahl ist animierbar.
Version	CSS3
DOM Syntax	object.style.columnCount = "4";

Syntax

Syntax der column-count-Eigenschaft

column-count: <integer> | auto | initial | inherit;

Beispiel der column-count-Eigenschaft:

Beispiel der CSS-Eigenschaft column-count mit dem Wert auto

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: auto;
      }
    </style>
  </head>
  <body>
    <h2>Column-count property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

Beispiel der column-count-Eigenschaft mit einem numerischen Wert:

Beispiel der CSS-Eigenschaft column-count mit einem numerischen Wert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 7;
      }
    </style>
  </head>
  <body>
    <h2>Column-count property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a great fact that a reader will be distracted by the readable content of a page when looking at its layout.
    </div>
  </body>
</html>

Probier es selbst »

Mit column-count: 7 teilt der Browser denselben Absatz in sieben Spalten auf. Wenn der Container zu schmal ist, um jeder Spalte eine nutzbare Breite zu geben, werden die Spalten sehr dünn – genau deshalb ist die Kombination von column-count mit column-width (oder der Kurzschreibweise columns) in der Regel besser als eine feste Anzahl.

Zusammenspiel mit anderen Spalteneigenschaften

column-count wird selten allein verwendet. Diese ergänzenden Eigenschaften beeinflussen die resultierenden Spalten:

Eigenschaft	Was sie steuert
`column-width`	Die ideale Breite jeder Spalte. In Kombination mit `column-count` begrenzt sie die Spaltenanzahl auf ein Maximum.
`column-gap`	Der Abstand zwischen den Spalten.
`column-rule`	Eine Linie zwischen den Spalten (ähnlich wie `border`, aber im Abstandsbereich).
`columns`	Kurzschreibweise zum gleichzeitigen Setzen von `column-width` und `column-count`.
`column-span`	Ermöglicht es einem Element (z. B. einer Überschrift), alle Spalten zu überspannen.
`column-fill`	Ob der Inhalt gleichmäßig auf die Spalten verteilt oder jede Spalte nacheinander gefüllt wird.

Ein bewährtes, robustes Muster ist es, eine Zielbreite und eine maximale Spaltenanzahl gleichzeitig zu setzen:

.article {
  column-width: 14rem;   /* aim for ~14rem-wide columns */
  column-count: 3;       /* but never more than 3 */
  column-gap: 2rem;
}

Häufige Fallstricke

Nur ganze Zahlen. column-count akzeptiert keine Bruchzahlen oder Einheiten – 2.5 und 200px sind ungültig. Verwende column-width, wenn du in Breiten denken möchtest.
Es ist ein Maximum, keine Garantie. Wenn column-width ebenfalls gesetzt ist, kann der Browser weniger Spalten darstellen als column-count, wenn nicht genug Platz vorhanden ist.
Inhalt kann zwischen Spalten getrennt werden. Verwende die Eigenschaft break-inside (break-inside: avoid), um zu verhindern, dass Elemente wie Abbildungen oder Listeneinträge an einer Spaltengrenze geteilt werden.
Animierbar, aber selten animiert. Der Wert kann übergangen werden, aber das Umfließen von Text in eine andere Spaltenanzahl ist optisch störend, weshalb es in Animationen kaum eingesetzt wird.

Die Eigenschaft column-count wird in allen modernen Browsern unterstützt. Internet Explorer 10–11 und ältere Safari-Versionen benötigten die Präfixe -ms- / -webkit-; heute ist die unpräfixierte Eigenschaft sicher verwendbar.

Werte

Wert	Beschreibung	Ausprobieren
auto	Die Anzahl der Spalten wird durch andere Eigenschaften bestimmt. Dies ist der Standardwert dieser Eigenschaft.	Ausprobieren »
`<integer>`	Gibt die genaue Anzahl der Spalten an, auf die der Inhalt verteilt werden soll.	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert.	Ausprobieren »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Was bewirkt die CSS-Eigenschaft 'column-count'?

Sie legt die Anzahl der Spalten in einem mehrspaltigen Layout fest.Sie legt den Abstand zwischen den Spalten im Layout fest.Sie legt die Farbe der Spalten im Layout fest.Sie legt die Breite der Spalten im Layout fest.Sie steuert, wie Inhalt aus seinem Container herausfließt.

Was column-count bewirkt