Wann und wie man ein mehrspaltiges CSS-Layout verwendet

Bei all der Aufregung um CSS Grid Layout und Flexbox wird oft eine andere Layoutmethode übersehen. In diesem Artikel werde ich einen Blick auf das mehrspaltige Layout werfen – oft als mehrspaltig oder manchmal als „CSS-Spalten“ bezeichnet. Sie erfahren, für welche Aufgaben es sich eignet und worauf Sie bei der Säulenherstellung achten müssen.

Was ist Multikol?

Die Grundidee von Multicol ist, dass Sie einen Teil des Inhalts nehmen und ihn wie in einer Zeitung in mehrere Spalten fließen lassen können. Dazu verwenden Sie eine von zwei Eigenschaften. Die Eigenschaft column-count gibt die Anzahl der Spalten an, in die der Inhalt aufgeteilt werden soll. Die Eigenschaft column-width gibt die ideale Breite an und überlässt es dem Browser herauszufinden, wie viele Spalten passen.

Es spielt keine Rolle, welche Elemente sich in dem Inhalt befinden, den Sie in einen Multicol-Container umwandeln, alles bleibt im normalen Fluss, aber in Spalten aufgeteilt. Dies unterscheidet Multicol von anderen Layoutmethoden, die wir heute in Browsern haben. Flexbox und Grid nehmen beispielsweise die untergeordneten Elemente des Containers und diese Elemente nehmen dann an einem Flex- oder Grid-Layout teil. Mit multicol haben Sie immer noch einen normalen Fluss, außer innerhalb einer Säule.

Im folgenden Beispiel verwende ich column-width , um Spalten von mindestens 14em . Multicol weist so viele 14em Spalten zu, wie passen, und teilt dann den verbleibenden Platz zwischen den Spalten auf. Spalten sind mindestens 14em , es sei denn, wir können nur eine Spalte anzeigen, in diesem Fall kann sie kleiner sein. Multicol war das erste Mal, dass wir diese Art von Verhalten in CSS sahen, wobei Spalten erstellt wurden, die standardmäßig im Wesentlichen reaktionsfähig waren. Sie müssen keine Medienabfragen hinzufügen und die Anzahl der Spalten für verschiedene Haltepunkte ändern, stattdessen geben wir eine optimale Breite an und der Browser wird es berechnen.

Säulen gestalten

Die Spaltenfelder, die erstellt werden, wenn Sie eine der Spalteneigenschaften verwenden, können nicht als Ziel verwendet werden. Sie können sie weder mit JavaScript ansprechen, noch können Sie eine einzelne Box formatieren, um ihr eine Hintergrundfarbe zu geben oder die Auffüllung und Ränder anzupassen. Alle Spaltenfelder haben die gleiche Größe. Das einzige, was Sie tun können, ist, eine Linie zwischen Spalten hinzuzufügen, indem Sie die Eigenschaft column-rule verwenden, die wie ein Rahmen wirkt. Sie können den Abstand zwischen Spalten auch mit der Eigenschaft column-gap steuern, die einen Standardwert von 1em hat, aber Sie können ihn in jede gültige Längeneinheit ändern.

Das ist die Grundfunktionalität von multicol. Sie können einen Teil des Inhalts nehmen und ihn in Spalten aufteilen. Der Inhalt füllt die Spalten der Reihe nach und erstellt Spalten in der Inline-Richtung. Sie können die Lücken zwischen den Spalten steuern und eine Regel mit den gleichen möglichen Werten wie der Rahmen hinzufügen. So weit, so gut, und all das Obige wird in Browsern sehr gut unterstützt und das schon seit langem, was diese Spezifikation in Bezug auf die Abwärtskompatibilität sehr sicher macht.

Es gibt einige weitere Dinge, die Sie bei Ihren Spalten berücksichtigen sollten, und einige potenzielle Probleme, die Sie bei der Verwendung von Spalten im Web beachten sollten.

Überspannende Spalten

Manchmal möchten Sie vielleicht einige Inhalte in Spalten aufteilen, aber dann dafür sorgen, dass sich ein Element über die Spaltenfelder erstreckt. Dies wird durch Anwenden der Eigenschaft column-span auf einen Nachkommen des multicol-Containers erreicht.

Im folgenden Beispiel habe ich bewirkt, dass sich ein <blockquote> -Element über meine Spalten erstreckt. Beachten Sie, dass dabei der Inhalt in eine Reihe von Kästen über der Spanne aufgeteilt wird und dann darunter eine neue Reihe von Spaltenfeldern beginnt. Der Inhalt springt nicht über das übergreifende Element.

Die column-span Eigenschaft wird derzeit in Firefox implementiert und steckt hinter einem Feature-Flag.

Beachten Sie, dass in der aktuellen Spezifikation die Werte für column-span entweder all oder none sind. Sie können nicht nur einige Spalten überspannen, aber Sie können ein Layout erhalten, das Sie vielleicht in einer Zeitung sehen, indem Sie Multicol mit anderen Layoutmethoden kombinieren. In diesem nächsten Beispiel habe ich einen Gittercontainer mit zwei Spaltenspuren. Die linke Spur ist 2fr , die rechte Spur 1fr . Den Artikel in der linken Spur habe ich zu einem Multicol-Container mit zwei Spuren gemacht, er hat auch ein überspannendes Element.

Auf der rechten Seite haben wir eine Seite, die in die zweite Grid-Spaltenspur geht. Indem wir mit den verschiedenen Layout-Methoden herumspielen, die uns zur Verfügung stehen, können wir genau herausfinden, welche Layout-Methode für die jeweilige Aufgabe geeignet ist – scheuen Sie sich nicht, zu mischen und anzupassen!

Kontrolle von Inhaltsunterbrechungen

Wenn Sie Inhalte mit Überschriften haben, möchten Sie wahrscheinlich vermeiden, dass eine Überschrift als letztes Element in einer Spalte endet und der Inhalt in die nächste Spalte gelangt. Wenn Sie Bilder mit Bildunterschriften haben, wäre die ideale Situation, dass Bild und Bildunterschrift als eine Einheit bleiben und nicht auf Spalten aufgeteilt werden. Um mit diesen Problemen fertig zu werden, verfügt CSS über Eigenschaften, um zu steuern, wo der Inhalt unterbrochen wird.

Wenn Sie Ihren Inhalt in Spalten aufteilen, führen Sie eine sogenannte Fragmentierung durch. Dasselbe gilt, wenn Sie Ihren Inhalt auf mehrere Seiten aufteilen, z. B. wenn Sie ein Stylesheet für einen Druckkontext erstellen. Daher ist Multicol den Paged Media am nächsten als anderen Layoutmethoden im Web. Aus diesem Grund bestand die Möglichkeit, Umbrüche im Inhalt zu kontrollieren, seit einigen Jahren darin, die page-break- Eigenschaften zu verwenden, die Teil von CSS2.1 waren.

• page-break-before
• page-break-after
• page-break-inside

In jüngerer Zeit hat die CSS-Fragmentierungsspezifikation Eigenschaften für die Fragmentierung definiert, die für jeden fragmentierten Kontext ausgelegt sind. Die Spezifikation enthält Details für Paged Media, Multicol und die Spezifikation für blockierte Regionen. Regionen fragmentieren auch einen kontinuierlichen Inhalt. Indem diese Eigenschaften generisch gemacht werden, können sie auf jeden zukünftigen fragmentierten Kontext angewendet werden, auf die gleiche Weise, wie die Ausrichtungseigenschaften von Flexbox in die Box-Ausrichtungsspezifikation verschoben wurden, damit sie im Raster- und Blocklayout verwendet werden können.

• break-before
• break-after
• break-inside

Als Beispiel habe ich break-inside avoid für das <figure> -Element verwendet, um zu verhindern, dass sich die Beschriftung vom Bild löst. Ein unterstützender Browser sollte die Abbildung zusammenhalten, auch wenn dadurch die Spalten unausgewogen aussehen.

Leider ist die Unterstützung für diese Eigenschaften in Multicol ziemlich lückenhaft. Selbst wenn sie unterstützt werden, sollten sie als Vorschlag angesehen werden, da es möglich wäre, so viele Anfragen zu stellen, während versucht wird, das Abbrechen zu kontrollieren, dass der Browser im Wesentlichen nirgendwo wirklich abbrechen kann. Die Spezifikation legt in diesem Fall Prioritäten fest, aber es ist wahrscheinlich sinnvoller, nur die wichtigsten Fälle zu kontrollieren.

Das Problem der Spalten im Web

Ein Grund, warum wir Multicol im Web nicht oft verwendet sehen, ist die Tatsache, dass es sehr einfach wäre, zu einem Leseerlebnis zu gelangen, das den Leser dazu bringt, in der Blockdimension zu scrollen. Das würde für diejenigen von uns, die Englisch oder einen anderen vertikalen Schreibmodus verwenden, ein vertikales Scrollen nach oben und unten bedeuten. Das ist kein gutes Leseerlebnis!

Wenn Sie die Höhe des Containers festlegen, z. B. mit der Viewport-Einheit vh , und zu viel Inhalt vorhanden ist, tritt ein Überlauf in Inline-Richtung auf, und Sie erhalten stattdessen eine horizontale Bildlaufleiste.

Keines dieser Dinge ist ideal, und die Verwendung von Multicol im Web ist etwas, über das wir sehr sorgfältig nachdenken müssen, wenn es um die Menge an Inhalten geht, die wir möglicherweise in unsere Spalten fließen lassen möchten.

Überlaufspalten blockieren

Für Level 2 der Spezifikation überlegen wir, wie wir eine Methode aktivieren können, mit der Überlaufspalten, die derzeit den horizontalen Scrollbalken verursachen, stattdessen in Blockrichtung erstellt werden könnten. Dies würde bedeuten, dass Sie einen mehrspaltigen Container mit einer Höhe haben könnten, und sobald der Inhalt Spalten erstellt hat, die diesen Container füllen, würde darunter ein neuer Satz von Spalten erstellt. Dies würde ein wenig wie unser Spanning-Beispiel oben aussehen, aber anstatt einen Schraubenschlüssel zu haben, der die neuen Spaltenboxen zum Starten bringt, wäre es der Überlauf, der durch einen Container mit einer Einschränkung in der Blockdimension verursacht wird.

Diese Funktion würde Multicol für das Web viel nützlicher machen. Auch wenn wir im Moment noch etwas abseits sind, können Sie das Problem im Repo der CSS-Arbeitsgruppe im Auge behalten. Wenn Sie zusätzliche Anwendungsfälle für diese Funktion haben, posten Sie sie, es kann beim Entwerfen der neuen Funktion wirklich hilfreich sein.

Wofür ist Multicol heute nützlich?

Mit der aktuellen Spezifikation ist es nicht ratsam, Ihren gesamten Inhalt in Spalten aufzuteilen, ohne die Probleme des Scrollens zu berücksichtigen. Es gibt jedoch einige Fälle, in denen Multicol im Web ideal ist. Es gibt genug Anwendungsfälle, um es zu etwas zu machen, das Sie bei der Betrachtung von Designmustern berücksichtigen sollten.

Einklappen kleiner UI- oder Textelemente

Multicol kann überall dort nützlich sein, wo Sie eine kleine Liste von Elementen haben, die weniger Platz einnehmen sollen. Zum Beispiel eine einfache Auflistung von Kontrollkästchen oder eine Liste von Namen. In diesen Szenarien liest der Besucher oft nicht eine Spalte herunter und geht dann zum Anfang der nächsten zurück, sondern durchsucht den Inhalt nach einem Kontrollkästchen zum Anklicken oder einem Element zum Auswählen. Selbst wenn Sie ein gescrolltes Erlebnis erstellen, ist dies möglicherweise kein Problem.

Auf der Website des DonarMuseums finden Sie ein Beispiel für Multicol, das von Sander de Jong auf diese Weise verwendet wurde.

Bekannte kleine Mengen an Inhalten

Es gibt Zeiten, in denen wir eine Website entwerfen, bei der wir wissen, dass ein Teil des Inhalts relativ klein ist und auf die meisten Bildschirme passt, ohne unerwünschtes Scrollen zu verursachen. Ich habe multicol auf Notist-Präsentationsseiten für die Einleitung eines Vortrags verwendet.

Andy Clarke hat ein schönes Beispiel für die Equfund-Website entworfen.

Um die Möglichkeit zu vermeiden, dass sehr kleine Bildschirme ein Scrollen verursachen, denken Sie daran, dass Sie Medienabfragen verwenden können, um sowohl die Höhe als auch die Breite zu überprüfen (oder in einer logischen Welt sowohl Block als auch Inline). Wenn Sie Spalten nur an einem Haltepunkt aktivieren, dessen min-height groß genug für ihren Inhalt ist, kann dies Benutzern sehr kleiner Geräte ein schlechtes Scrollerlebnis ersparen.

Mauerwerk-ähnliche Anzeige von Inhalten

Ein weiterer Ort, an dem das mehrspaltige Layout wunderbar funktioniert, ist, wenn Sie eine Freimaurer-Art der Anzeige von Inhalten erstellen möchten. Multicol ist derzeit die einzige Layoutmethode, die diese Art von Layout mit ungleich hohen Elementen erstellt. Das Raster würde entweder eine Lücke hinterlassen oder die Elemente strecken, um ein striktes zweidimensionales Raster zu erstellen.

Veerle Pieters hat auf ihrer Inspirationsseite ein schönes Beispiel für die Verwendung von Multicol auf diese Weise.

Grid- und Flexbox-Fallbacks

Die column- können auch als Fallback für Grid- und Flex-Layout verwendet werden. Wenn Sie eine der Eigenschaften für einen Container angeben, wandeln Sie diesen Container in ein Flex- oder Grid-Layout um, indem Sie display: flex oder display: grid verwenden, jedes Spaltenverhalten wird entfernt. Wenn Sie beispielsweise ein Kartenlayout haben, das ein Rasterlayout verwendet, und das Layout lesbar wäre, wenn es in Spalten und nicht über die Seite verlaufen würde, könnten Sie Multicol als einfachen Fallback verwenden. Browser, die Grid nicht unterstützen, erhalten die mehrfarbige Anzeige, diejenigen, die Grid unterstützen, erhalten das Grid-Layout.

Multicol nicht vergessen!

Ziemlich häufig beantworte ich Grid- und Flexbox-Fragen, bei denen die Antwort lautet, Grid oder Flexbox nicht zu verwenden, sondern sich stattdessen Multicol anzusehen. Sie werden es wahrscheinlich nicht auf jeder Website verwenden, aber wenn Sie auf einen Anwendungsfall stoßen, kann es sehr hilfreich sein. Drüben bei MDN gibt es nützliche Ressourcen für Multicol und die damit verbundenen Fragmentierungseigenschaften.

Wenn Sie Multicol in einem Projekt verwendet haben, hinterlassen Sie vielleicht eine Notiz in den Kommentaren, um uns andere Möglichkeiten mitzuteilen, wie wir die Funktion verwenden können.