column-count, column-width und echtes Zeitungslayout
Das CSS Multi-Column Layout ist eines der am meisten unterschätzten Layout-Module im modernen CSS. Mit column-count, column-width, column-gap und break-inside lassen sich Zeitungslayouts, Gallery-Stacking und Masonry-ähnliche Strukturen vollständig ohne JavaScript realisieren – direkt im Browser, mit nativer Unterstützung in allen modernen Engines.
Inhaltsverzeichnis
- 1. Was CSS Multi-Column Layout wirklich kann
- 2. column-count: Spaltenanzahl exakt steuern
- 3. column-width: Responsive Spalten ohne Media Queries
- 4. column-gap und column-rule: Abstände und Trennlinien
- 5. break-inside: Inhalte vor dem Zerreißen schützen
- 6. column-span: Elemente über alle Spalten strecken
- 7. Masonry-Alternative mit CSS Multi-Column Layout
- 8. Zeitungslayout: Klassische Editorial-Designs