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)
Ersten Kommentar schreiben
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.

Als Mitglied können Sie diesen Beitrag weiterlesen!

Werden Sie Mitglied und testen Sie akademie.de 14 Tage lang kostenlos!

In den ersten 14 Tagen haben Sie Zugriff auf alle Inhalte auf akademie.de, außer Downloads. Sie können in dieser Zeit ohne Angabe von Gründen stornieren. Eine E-Mail an service@akademie.de genügt. Nur wenn Sie Mitglied bleiben, wird der Mitgliedsbeitrag nach Ende der 14tägigen Stornofrist abgebucht.

Ich bin bereits Mitglied
Jetzt Mitglied werden und akademie.de 14 Tage kostenlos testen
Ich entscheide mich für folgende Zahlungsweise:
14 Tage Stornorecht:
Ich kann meine Mitgliedschaft in den ersten 14 Tagen jederzeit formlos stornieren, z.B. per E-Mail an service@akademie.de.

Newsletter abonnieren