CSS: Methoden für responsive Spalten-Layouts

Praktisch und mit Beispielen erklärt: Verschiedene CSS-Methoden für mehrspaltige Layouts samt ihrer Vor- und Nachteile.

5
(2)
Stand: 25. März 2015

Egal, ob Website oder Blog – Zwei-, Drei- und Mehrspalten-Layouts beherrschen das moderne Webdesign. Layouts mit bildschirmfüllenden Hintergrundbildern und solche, bei denen horizontal gescrollt werden muss, eignen sich jedoch nicht für die Darstellung auf mobilen Endgeräten mit geringen Displaygrößen. Mehrere Spalten hingegen lassen sich auf schmaleren Displays untereinander anordnen. Gemäß dem Mobile-First-Prinzip können so, mit zunehmender Bildschirmbreite, stetig mehr Spalten nebeneinander angeordnet werden. Mithilfe von Media Queries entsteht an den definierten Breakpoints ein fließendes Layout vom Ein- zum Mehrspalter.

Mobile-First-PrinzipBild vergrößernDas Prinzip lautet: Mobile First.

Zur Umsetzung von Spaltenlayouts existieren in CSS mehrere Methoden. Dazu zählt das klassische und altbewährte Float-Konzept, bei dem die Spalten nebeneinander „fließen“. Seit CSS3 stehen drei weitere Methoden zur Verfügung: Multi-column, CSS-Tabellen mit der Eigenschaft display: table und flexible Boxen (Flexbox) mit der Eigenschaft display: flex. Die vier Methoden werden im Folgenden durch Beispiele erläutert und hinsichtlich ihrer Browserkompatibilität und ihrer Vor- und Nachteile einander gegenübergestellt.

Multi-Column – Spaltensatz

Mit der CSS-Eigenschaft columns lassen sich Inhalte eines Blockelements im Spaltensatz anzeigen. Es handelt sich hierbei jedoch um eine rein optische Darstellungsform. Der Fließtext innerhalb eines solchen Blockelements wird dabei einfach auf mehrere Spalten aufgeteilt. Die Anzahl der Spalten und ihre Breite lassen sich über column-count definieren. Der Inhalt des P-Elements wird somit auf drei gleichmäßig breite Spalten aufgeteilt. Mit der Angabe column-width kann die Mindestbreite der Spalten definiert werden. Die Eigenschaft column-gap steuert den Abstand zwischen den Spalten. Zur besseren Abgrenzung kann auch eine Trennlinie über column-rule (bzw. column-rule-color, column-rule-style und column-rule-width) eingesetzt werden.

p {
 column-count: 3;
 column-width: 200px;
 column-gap: 50px;
 column-rule: 1px solid red;
 }

Reicht der Platz in der Breite nicht für alle drei Spalten, so fließt der Text in zwei bzw. einer Spalte:

Browserunterstützung

Leider werden nicht alle column-Eigenschaften von allen Browsern gleichermaßen unterstützt. Deshalb ist es notwendig, mit den jeweiligen Browser-Präfixen zu arbeiten. Der Firefox versteht zudem die Eigenschaft column-span nicht, mit der man zum Beispiel eine Zwischenüberschrift über alle Spalten ausrichten kann.

Mitglied werden

Als zahlendes Mitglied von akademie.de haben Sie vollen Zugriff auf alle Inhalte und können alle PDF-Dateien, Checklisten, Mustervorlagen und Anwendungen herunterladen.

Sind Sie sich noch unsicher? Dann wählen Sie die Option “akademie.de kostenlos testen”. So können Sie sich 14 Tage in Ruhe umschauen. Downloads stehen Ihnen in dieser Zeit nicht zur Verfügung. Gefällt Ihnen akademie.de nicht, reicht ein formloser Widerruf per E-Mail innerhalb der ersten 14 Tage. Es entstehen für Sie keine Kosten. Widerrufen Sie nicht, erhalten Sie nach Ablauf von 14 Tagen vollen Zugriff und der Mitgliedsbeitrag wird abgebucht.

Ich bin bereits Mitglied
Mitglied werden!
Ich entscheide mich für folgende Zahlungsweise:

Newsletter abonnieren