Aus dem Kurs: CSS Grid Grundkurs

Vorteile und Features von CSS Grid

Aus dem Kurs: CSS Grid Grundkurs

Gratismonat starten Für Ihr Team erwerben

Vorteile und Features von CSS Grid

“

Was ist CSS Grid eigentlich? CSS Grid heißt offiziell CSS Grid Layout Module Level 1. Das ist eine W3C Candidate Recommendation seit Mai 2017. Die Browserunterstützung schaut gut aus. Alle aktuellen Browser unterstützen CSS Grid standardmäßig. Im Edge soll es in Version 16 kommen, Internet Explorer ab Version 10 und Versionen von Edge vor 16 unterstützen eine Vorversion von CSS Grid. Prinzipiell sind die Browserhersteller einen anderen Weg gegangen als sie begonnen haben, an der Implementierung von CSS Grid zu arbeiten. Sie haben es hinter einem Flag gemacht. Das heißt, man musste die Unterstützung im Browser aktivieren und dann konnte man damit herumexperimentieren. Gleichzeitig war aber klar, solange es nicht automatisch aktiviert ist, kann man es noch nicht für Webseiten einsetzen. Das hat sich aber schlagartig im Monat März 2017 geändert. Das war der Monat, wo es standardmäßig aktiviert wurde im Firefox, Chrome und Safari. Das heißt, wenn Sie mit CSS Grid arbeiten, müssen Sie nicht diese komischen herstellerspezifischen Präfixe wie Mods und Webkit einsetzen, weil das hat dann von Anfang an sofort ohne Präfix funktioniert. Was kann man jetzt machen mit Grid? Sie können Raster definieren, so wie Sie es vielleicht früher über Tabellen gemacht hätten. Solche einfachen Raster könnten Sie auch realisieren, aber diese Raster sind natürlich wesentlich flexibler und die können sich auch anpassen, je nachdem wie viel Platz zur Verfügung ist. Dieser Raster war eben dreispaltig, jetzt ist es nur zweispaltig und dann wird es einspaltig. Wenn Sie solche Raster definieren, dann können Sie auch Rasterbereiche freilassen und Sie können natürlich festlegen, dass sich Elemente auch über mehrere Rasterelemente erstrecken. Sehen wir uns das kurz an und lassen das Raster einmal einblenden. Es geht sehr schön im Firefox. Wenn ich das Element auswähle und auf dieses Rastersymbol klicke, dann sieht man das Raster und man sieht, A erstreckt sich über zwei Elemente. Und in der Mitte haben wir eine Rasterzelle, die frei bleibt. Das kann man für schöne Layouts nutzen. Hier ist ein Beispiel, wo ganz bewusst Bereiche freigelassen wurden. Außerdem können Sie mit CSS Grid auch Elemente definieren, die sich überlappen. Das ist beispielsweise nicht möglich mit Flexbox. Ihre Raster, die Sie definieren, können ungeheuer flexibel sein. Sie sehen ein sehr flexibles Raster hier. Im Beispiel ist es eins-, zwei-, drei-, vier-, fünfspaltig, aber je nach verfügbarem Platz, kann es auch weniger Spalten haben. Jetzt ist es nur noch dreispaltig. Und das Entscheidende ist, dass wir bei der Rasterdefinition immer gleichzeitig eine Steuerung in der Vertikalen und in der Horizontalen haben, dass die also wirklich zusammenhängen. Und deswegen spricht man auch davon, dass die Definitionen zweidimensional sind. CSS Grid ist also eine neue Möglichkeit zur Erstellung von Layouts, die seit März 2017 in allen großen Browsern automatisch aktiviert ist.

Inhalt