CSS multi-column layout

Das Modul CSS multi-column layout ermöglicht es Ihnen, Inhalte über mehrere Spalten zu verteilen. Mit den Eigenschaften dieses Moduls können Sie die gewünschte Anzahl und Breite der Spalten, die Größe des Abstands zwischen den Spalten und das visuelle Erscheinungsbild der optionalen Spaltentrennungslinien (bekannt als Spaltenregeln) definieren. Sie können auch festlegen, wie der Inhalt von Spalte zu Spalte fließen soll und wie der Inhalt zwischen den Spalten aufgeteilt werden soll.

Multi-Column-Layout in Aktion

In diesem Beispiel wird die Rede von 1967 zur hundertjährigen Feier Kanadas, A Lament for Confederation von Chief Dan George, über mehrere Spalten angezeigt, ähnlich wie Zeitungsartikel in gedruckten Zeitungen dargestellt werden. Wenn Sie JavaScript aktiviert haben, ermöglichen Steuerungen, die bevorzugte Spaltenanzahl und -breite zu ändern, die Breite der Zwischenräume zwischen den Spalten, ob der Titel und ein Beispiel-Blockzitat in einer einzelnen Spalte oder über alle Spalten hinweg angezeigt werden soll und ob das Umbrechen innerhalb der Absätze vermieden werden soll.

Um den Code für dieses spaltenbasierte Layout zu sehen, sehen Sie sich den Quelltext auf GitHub an.

Hinweis: Mehrspaltige Layouts stehen in engem Zusammenhang mit paged media. Jedes Spaltenkästchen ist ein Fragment, ähnlich wie jede gedruckte Seite ein Fragment eines Dokuments ist. Mit den im Modul CSS fragmentation definierten Eigenschaften können Sie steuern, wie Inhalte zwischen Spalten und Seiten gebrochen werden.

Referenz

Eigenschaften

break-after
break-before
break-inside
column-fill
column-gap
column-span
column-rule Kurzform
columns Kurzform
- column-count
- column-width

Hinweis: Bedenken Sie, dass das Einstellen der Containerhöhe und der Zeilenlänge Herausforderungen für Menschen mit visuellen oder kognitiven Behinderungen darstellen kann. WCAG Erfolgs-Kriterium 1.4.8 besagt, dass auch wenn die Textgröße verdoppelt wird, der Inhalt nicht scrollbar sein sollte.

Leitfäden

Grundkonzepte des Multi-Column-Layouts: Ein Überblick über die Multiple-Column-Layout-Spezifikation
Styling von Spalten: Wie man Spaltenregeln verwendet und den Abstand zwischen Spalten verwaltet.
Übergreifen und Ausgleichen: Wie man Elemente über alle Spalten hinwegspannt und die Art und Weise, wie Spalten gefüllt werden, steuert.
Umgang mit Überlauf im Multi-Column-Layout: Was passiert, wenn ein Element die Spalte, in der es sich befindet, überläuft und was passiert, wenn zu viele Spalteninhalte in einen Container passen sollen.
Umgang mit Inhaltsumbrüchen im Multi-Column-Layout: Einführung in die Fragmentierungsspezifikation und wie man steuert, wo Spalteninhalte gebrochen werden.

Spezifikationen

Specification
CSS Multi-column Layout Module Level 1