CSS-Mehrspalten-Generator

Was CSS-Mehrspaltigkeit ist

Das CSS-Multi-column-Layout-Modul (die W3C-Spezifikation „CSS Multi-column Layout Module Level 1“) verteilt den Inhalt eines einzelnen Elements automatisch auf zwei oder mehr Spalten, so wie der Zeitungs- und Zeitschriftendruck Langtexte seit Jahrhunderten behandelt. Sie geben an, wie viele Spalten Sie wollen (oder wie breit jede Spalte sein soll), und der Browser verteilt den Inhalt von oben nach unten, von links nach rechts, und gleicht die Zeilenanzahl so aus, dass jede Spalte etwa auf gleicher Höhe endet. Das Modul wurde im April 2011 zur W3C Candidate Recommendation und kam zwischen Firefox 3.5 (Juni 2009) und IE 10 (Oktober 2012) in nutzbarer Form in die Browser. Es ist seit über einem Jahrzehnt eine Standard-Funktion der Web-Plattform. Anders als Flexbox oder Grid (die einzelne Kindelemente an bekannten Positionen ausrichten) behandelt Multi-Column den Inhalt als einen einzigen kontinuierlichen Fluss, den der Browser je nach verfügbarer Höhe in Spalten zerlegt.

Wann CSS-Spalten das richtige Werkzeug sind

• Lange Artikeltexte auf breiten Bildschirmen. Einspaltigen Text mit mehr als etwa 75 Zeichen pro Zeile zu lesen, strengt die Augen an, der Blick muss zu weit wandern, um den Anfang der nächsten Zeile zu finden. Ein zweispaltiges Layout halbiert die Zeilenlänge bei gleichem vertikalen Platz und verbessert die Lesbarkeit auf Breitbildschirmen erheblich.
• Definitionslisten und Glossare. Lange alphabetische Listen kurzer Einträge verteilen sich natürlich auf mehrere Spalten, ohne dass man sie von Hand ausgleichen muss.
• Linklisten im Footer. Der klassische „Site-Map“-Footer mit Dutzenden von Links (Kategorien untereinander, Links nebeneinander) passt natürlich zu column-count.
• Feature-Listen und Aufzählungen. Eine lange Liste, die einspaltig endlos scrollen würde, liest sich auf zwei oder drei Spalten viel besser.
• Druck-Stylesheets. Multi-Column ist eine der wenigen CSS-Funktionen, die sich wunderbar auf Papier übersetzt, das Format, das Zeitungen seit ihrer Erfindung verwenden.

column-count vs. column-width, die wichtigste Unterscheidung

Zwei Wege, Spalten zu spezifizieren, und die Wahl ist für responsives Design wichtig. column-count: 3 codiert drei Spalten fest, bei jeder Viewport-Breite produziert der Browser genau drei Spalten, die mit schmaler werdendem Container schmaler werden. Auf einem Smartphone werden drei Spalten zu unleserlichen dünnen Streifen. column-width: 250px fragt stattdessen nach Spalten „mindestens 250 Pixel breit“; der Browser berechnet, wie viele in den Container passen, und ordnet automatisch um, wenn sich der Viewport ändert. Breite Bildschirme bekommen viele Spalten, schmale wenige oder eine, ohne eine einzige Media Query. Das kombinierte Muster ist die moderne Best Practice: columns: 250px 4 (Kurzform für column-width plus column-count) bedeutet „Spalten 250 px breit, aber niemals mehr als 4“. Der Browser produziert 4 Spalten auf einem breiten Desktop, weniger auf einem Tablet, eine auf einem Telefon, automatisch responsive. Das meiste produktive CSS verwendet diese Kombinationsform wegen ihrer Robustheit.

Steuern, wo der Inhalt umbricht

Standardmäßig bricht der Browser Spalten dort um, wo er gerade landet, was manchmal eine Überschrift von ihrem ersten Absatz trennt oder eine Karte in der Mitte zerschneidet. Die CSS-Eigenschaft break-inside: avoid (CSS Fragmentation Module Level 3) sagt dem Browser „zerteile dieses Element nicht über Spalten“, typischerweise auf Karten, Abbildungen und alle Inhalte angewendet, die zusammenbleiben sollen. break-before: column erzwingt einen Spaltenumbruch vor einem Element, nützlich für „beginne jeden Abschnitt in einer neuen Spalte“. column-span: all lässt eine Überschrift oder einen Hinweis über die volle Breite aller Spalten reichen und durchbricht den Spaltenfluss, typisch für den Artikel-Titel oberhalb eines mehrspaltigen Textkörpers.

Stolperfallen, auf die man achten sollte

Multi-Column hat subtile Wechselwirkungen, die man kennen sollte. Die Lesereihenfolge in Screenreadern folgt der DOM-Reihenfolge, was im Allgemeinen mit der visuellen Spalten-Reihenfolge von oben nach unten übereinstimmt, assistive Technologie kann sich aber bei komplexen Layouts gelegentlich verirren. Die Druckpaginierung mit Multi-Column kann seltsame Spaltenbalancen über Seitenumbrüche hinweg erzeugen; testen Sie mit einem Druck-Stylesheet, wenn Ihnen die Papierausgabe wichtig ist. Lange Inhalte füllen sich nach unten: wenn Sie einem Multi-Column-Container eine feste Höhe geben, die kürzer ist als der Inhalt braucht, läuft Inhalt über; wenn Sie die Höhe nicht beschränken, balanciert der Browser die Spalten auf ungefähr gleiche Länge. Verankerte Inhalte (Formulare, interaktive Elemente, die an einem Ort bleiben müssen) funktionieren in Spalten schlecht, weil der Nutzer nicht weiß, wohin er schauen soll. Das Mischen mit Grid oder Flexbox auf derselben Ebene erzeugt unvorhersehbare Ergebnisse, wählen Sie eine Layout-Methode pro Container.

Erzeugte CSS-Eigenschaften

• column-count: explizite Spaltenanzahl (feste Zahl, passt sich nicht an den Viewport an)
• column-width: minimale Spaltenbreite (der Browser berechnet, wie viele passen, vollständig responsive)
• column-gap: horizontaler Abstand zwischen Spalten; der Standard von 1em ist meist passend
• column-rule: dekorative vertikale Linie zwischen Spalten (Breite, Stil, Farbe, wie ein Rahmen)
• column-span: all: auf eine Überschrift oder einen Hinweis angewendet, um die volle Breite über alle Spalten zu erstrecken