Veröffentlicht am 14. Januar 2026
Ab Chrome 145 werden die Attribute column-wrap und column-height aus der Spezifikation für das mehrspaltige Layout auf Ebene 2 unterstützt.
Mit diesen Eigenschaften können Sie Spalten in Blockrichtung in eine neue Zeile umbrechen.
Vor Chrome 145 wurde Inhalt, der nicht in den verfügbaren Platz passte, als Überlaufspalten in Inline-Richtung dargestellt, wenn die Höhe des Multicol-Containers begrenzt war. Dadurch würde eine horizontale Scrollleiste im Web erstellt.
Mit den Attributen column-height und column-wrap können Sie eine Höhe für die Spaltenzeile festlegen und die Überlaufspalten als neue Zeile anzeigen lassen.
Wenn Sie neue Zeilen mit Spalten erstellen können, umgehen Sie die aktuelle Situation, in der Sie entweder Nutzer zum Auf- und Abscrollen zwingen, um Spalten zu lesen, oder das Risiko einer horizontalen Scrollleiste eingehen, wenn die Menge an Inhalten unvorhersehbar ist.
Außerdem sind Muster wie ein Blockrichtungs-Karussell möglich, bei dem Spalten erstellt werden, die die verfügbare Höhe des Viewports ausfüllen. Um die nächste Zeile mit Spalten zu lesen, scrollen Sie in Blockrichtung zum nächsten Bildschirm.
Für eine gute Lesbarkeit sorgen
Bei mehreren Spaltenreihen kann es zu einer unübersichtlichen Darstellung kommen, bei der der Leser nicht erkennt, dass es mehrere Reihen gibt, und den Abstand überspringt, um in der Spalte weiterzulesen. Dies sollte bei der Gestaltung der Benutzeroberfläche berücksichtigt werden. Mit der demnächst verfügbaren Funktion zum Hinzufügen von Dekorationen in den Zeilenabstand erhalten Sie ein zusätzliches Tool, um diese visuelle Unterscheidung zu schaffen.
Regeln für Zeilen sind demnächst verfügbar
Die Spezifikation für die erste Ebene von Spalten mit mehreren Spalten enthält Eigenschaften für die Formatierung einer Spaltenregel. Diese Regel wird in den Spaltenzwischenraum eingefügt. Eigenschaften zum Formatieren von Zeilenregeln sind in der neuen CSS Gap Decorations-Spezifikation enthalten, die sich derzeit in der Entwicklertestphase befindet. Sobald diese Funktion stabil ist, können Sie Zeilen- und Spaltenregeln in Grid-, Flexbox- und Multicol-Layouts hinzufügen.