© Artnis/Shutterstock.com
Raster definieren mit CSS Grid

Komfortabel Weblayouts erstellen


Das Grid-Layout aus CSS3 kommt einer Revolution bei der Erstellung CSS-basierter Layouts gleich. Früher musste man tricksen, um Layouts zu gestalten – jetzt geht es endlich intuitiv. Gleichzeitig ist das Grid-Layout äußerst mächtig. Und das Gute: Grid-Layout wird in den aktuellen Versionen aller großen Browser unterstützt.

Auch im Jahr 2017 werden die meisten Weblayouts noch immer mit Techniken umgesetzt, die ursprünglich gar nicht für Layouts gedacht waren und auch nur bedingt dafür geeignet sind. Dazu gehören zum Beispiel float, display: inline-block, display: table-cell und Co. Einzelne Komponenten von CSS3 wie abgerundete Ecken, Schatten, Farbverläufe oder Transitions haben es längst in Weblayouts und in unseren Workflow geschafft, aber layouttechnisch sind wir in den letzten zehn Jahren nicht viel weiter gekommen. Glücklicherweise ändert sich das – zum einen durch Flexbox, das immer weiter adaptiert wird, und jetzt neuerdings durch CSS Grid (offiziell: „CSS Grid Layout Module Level 1“).

Im folgenden Artikel sehen Sie anhand eines Beispiels zunächst, wie CSS Grid funktioniert, danach geht es um die Unterschiede zu Flexbox. Am Ende dieses Artikels widmen wir uns dem Thema Browserunterstützung und Fallbacklösungen.

Wunschlos glücklich mit CSS Grid

CSS Grid ist eine Spezifikation des W3C zur Erstellung von Layouts [1]. Seit Mai 2017 ist CSS Grid eine „Candidate Recommendation“, d. h. nur eine Stufe von der endgültigen Verabschiedung entfernt. CSS Grid ermöglicht genau das, was der Name verheißt: die Erstellung und Definition von Rastern für Webseiten. Sie können sowohl einfache zwei- oder dreispaltige Raster definieren als auch ausgefeilte 16-spaltige Raster. Das Aussehen und die Anzahl der Zeilen lässt sich ebenfalls festlegen; allerdings können Sie auch auf das implizite Raster setzen, wodurch die benötigten Zeilen automatisch erstellt werden. Außerdem lassen sich Abstände zwischen den Rasterzellen definieren und die HTML-Elemente beliebig auf dem Raster verteilen. Einzelne Elemente können sich dabei über mehrere Spalten oder Zeilen erstrecken; Rasterzellen können aber auch frei bleiben, was ganz neue Layouttypen ermöglicht.

Auch in puncto Ausrichtung bietet CSS Grid alles, was das Herz begehrt: Mit einer Handvoll Eigenschaften können Sie Ihre Elemente beliebig vertikal und horizontal ausrichten. Die Ausmaße des Rasters können Sie sehr flexibel bestimmen, d. h. beispielsweise Spalten in fester Breite mit flexiblen Spalten kombinieren, die den übrigen ...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang