Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Mit dem »Multi Column Layout« von CSS lassen sich Inhalte in mehreren Spalten anzeigen. Das CSS-Feature bietet sich besonders gut für Fließtexte an, kann aber auch für andere Darstellungen sinnvoll eingesetzt werden. Besonders interessant ist, dass mit Multi Columns responsive Layouts ohne Media Queries möglich sind. Die Gestaltung von in sich abgeschlossenen Komponenten wird somit möglicherweise einfacher.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Die minimale Spaltenbreite festlegen

Das Multi Column Layout bietet einige CSS-Eigenschaften für die Umsetzung mehrspaltiger Layout. Wir gehen im Folgenden nur auf die Eigenschaften ein, die im Zusammenhang mit automatisch umbrechenden Layouts relevant sind.

Der folgende Code erzeugt einen mehrspaltigen Textabsatz mit einer nicht definierten Anzahl an Spalten. Der Browser rendert automatisch weitere Spalten, wenn ausreichend Platz vorhanden ist. In diesem Fall wird der Inhalt zweispaltig, sobald 2x 300 Pixel Spaltenbreite sowie der Abstand zwischen Spalten von 3em zur Verfügung steht.

p {
    column-width: 300px;
    column-gap: 3em;
}
Automatisch umbrechende Spalten mit CSS Multi Columns
Automatisch umbrechende Spalten mit CSS Multi Columns

Beispiel anzeigen

Die minimale Spaltenbreite und die maximale Anzahl an Spalten festlegen

Im vorherigen Beispiel kann die Anzahl der Spalten unendlich hoch werden. Wenn das nicht gewünscht ist, kann auch eine Obergrenze festgelegt werden.

Die minimale Spaltenbreite beträgt im folgenden Beispiel nach wie vor 300 Pixel. Allerdings werden nie mehr als zwei Spalten erzeugt.

p {
    columns: 2 300px;
    column-gap: 3em;
}

Beispiel anzeigen

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 1 Kommentar

  1. Rainer Haessner
    schrieb am 06.09.2019 um 15:49 Uhr:

    Danke. Das ist ja toll. So einen automatischen Mehrspaltenumbruch suche ich schon lange.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →