CSS: The Definitive Guide, 5. Auflage

Kapitel 12. Gitternetz-Layout

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Bei der Einführung von hatte CSS ein Loch in der Mitte. Designer beugten andere Funktionen für die Zwecke des Layouts vor, vor allem float und clear, und hackten sich generell um dieses Loch herum. Das Flexbox-Layout half, das Loch zu füllen, aber Flexbox ist eigentlich für bestimmte Anwendungsfälle gedacht, z. B. für Navigationsleisten (Navbars), wie in Kapitel 11 gezeigt.

Das Rasterlayout hingegen ist ein allgemeines Layoutsystem. Mit seiner Betonung auf Zeilen und Spalten mag es sich zunächst wie eine Rückkehr zum Tabellenlayout anfühlen - und in gewisser Hinsicht ist das auch gar nicht so abwegig -, aber das Rasterlayout hat weitaus mehr zu bieten als das Tabellenlayout. Das Raster ermöglicht es, Teile des Designs unabhängig von der Reihenfolge in der Dokumentquelle anzuordnen und sogar Teile des Layouts zu überlappen, wenn du das möchtest. CSS bietet äußerst flexible Methoden, um sich wiederholende Muster von Rasterlinien zu definieren, Elemente an diese Rasterlinien anzuhängen und vieles mehr. Du kannst Raster in Raster verschachteln oder auch Tabellen oder Flexbox-Container an ein Raster anhängen. Und vieles, vieles mehr.

Kurz gesagt: Das Grid-Layout war das Layout-System, auf das wir lange gewartet haben, und 2017 ist es in allen wichtigen Browser-Engines gelandet. Es nimmt viele, viele Layouts, die schwierig ...