kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS Multi Columns – Responsive Layouts ohne Media Queries

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.

Workshops und Seminare von kulturbanause

Adobe XD, Performance, Responsive Design, Sketch, Visual Prototyping, Corporate Design …

Jetzt Frühbucher-Rabatte sichern!

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.