Florence Maurice Freelancer

Da die Nutzerzahl von nicht-Grid-Browsern ständig abnehmen wird, ist es gut, sich schon heute mit dem zu beschäftigen, was in den nächsten Jahren die Standardlayouttechnik werden wird.

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. 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 Platz optimal unter sich aufteilen. Zudem sind mit der Funktion minmax() auch Ausmaßdefinitionen möglich wie „mindestens 200 px, aber höchstens 50 %“. CSS Grid bietet Ihnen viele Optionen zur Rasterdefinition, die gleichzeitig so flexibel sind, wie es für heutige Webseiten benötigt wird. Dabei können Sie auch auf sehr intuitive Techniken zurückgreifen. Und selbstverständlich lassen sich für unterschiedliche Viewports verschiedene Raster definieren.

Den vollständigen Artikel lesen Sie in der Ausgabe:

PHP Magazin 6.17 - "React"

Alle Infos zum Heft
579810577Weblayouts ganz intuitiv mit CSS Grid erstellen
X
- Gib Deinen Standort ein -
- or -