-
Flexibilität wird zum StandardDie Flexibilität, wie sie Grid-Frameworks handhaben, wird nun auch von Haus von CSS mit dem Grid-Modul gewährleistet. -
Komplexe Layout-StrukturenGrid-Frameworks definieren oft nur Spalten-Anordnung. Mit CSS-Grids hat man die Möglichkeit auch zeilenübergreifend zu stylen.
-
Ein zentrales SteuerungselementBei herkömmlichen Grid-Frameworks wird die Grösse und Position direkt beim betreffenden Element definiert - bei CSS-Grids durch ein zentrales Steuerungselement.
Das Wichtigste in Kürze
Inhalt
Die Relevanz des Layouts von heute
Ein hohes Mass an Flexibilität wird in der Welt des Webdesigns heutzutage sehr gross geschrieben. Eine Webseite mit flexiblen Elementen ist ein Muss. Diese Forderungen gehen mit den technologischen Fortschritten der letzten Jahren einher.
Kurze Zeit nachdem Smartphones und Tablets aus dem Haushalt nicht mehr wegzudenken waren, entwickelte sich das responsive Design. Das responsive Design definiert, wie das einzelne Element, zum Beispiel ein Bild, auf einer Webseite dargestellt wird und berücksichtigt dabei die verschiedenen Display-Grössen der Endgeräte. Dies bedeutete auch die Geburtsstunde von modernen Grid-Frameworks.
Grid-Frameworks im Rückblick & ihre Grenzen
Im Grunde definieren herkömmliche Grid-Frameworks eine horizontale Anreihung von Spalten, welche ihre Breite prozentual zu einem äusseren Container erhalten. Wenn man das simple Beispiel von zwei Spalten nimmt, welche je gleich gross sein sollen und im Gesamten die ganze Seite nützen, vergibt man den beiden Spalten je eine Breite von 50%.
Dies geschieht in Frameworks vorwiegend durch die Vergabe von vordefinierten Klassen oder eigens gebildeter CSS-Properties, welche dann durch eine Engine kompiliert werden. So unterteilt beispielsweise «Twitter Bootstrap» ein Layout in 12 Spalten, welche mit Hilfe von CSS-Klassen (Beispiel: .col-6 = Element ist 6 Spalten breit, oder eben 50%) an die Elemente aufgeteilt werden können. Der Nachteil dieser vordefnierten Struktur wird jedoch schnell klar, wenn ein Layout einmal nicht in dieses 12er-Raster hinein passt.
Einer der Gründe, weshalb solche Frameworks trotz dieser Limitierung einen hohen Anklang finden ist, dass das responsive Handling bereits gegeben und vorbereitet ist. So lässt sich die Spaltenbreite der meisten Elemente mit einfacher CSS-Syntax für verschiedene Grössen der Anzeigegeräte definieren (Beispiel: .col-6 .col-sm-12 = Element ist normal nur 6 Spalten breit (50%) und auf kleinen Bildschirmen dann 12 Spalten breit (100%). Die Vorteile für die vereinfachte Programmierung einer responsiven Website überwiegen so häufig die Nachteile der eingeschränkten Flexibilität durch das vorgegebene Raster.
Ebenfalls lassen sich diese Frameworks meistens nur in der Horizontalen definieren und sind deshalb nur beschränkt geeignet für komplexe Layouts, welche teilweise auch eine zeilenübergreifende Positionierung der Elementen voraussetzen.
Was gibt es nun für Möglichkeiten, wenn man eine Galerie hat und Bilder unterschiedlich hoch anzeigen möchte? Man benötigt in der Regel eine vom Framework unabhängige Library oder sucht selber eine framework-unabhängige Lösung. Dies führt aber meistens zu einem suboptimalen Resultat, da dies einerseits zu Mehraufwand und Performance-Einbussen führen kann und andererseits den Standard des Frameworks ignoriert.
Was macht CSS-Grids nun besser?
Vor knapp zwei Jahren rückte auch das W3C nach. Mit der Veröffentlichung des CSS-Grids wurde dem Bedürfnis nach einer einfachen und responsiven Layout-Gestaltung Rechnung getragen. Dabei wurde der inoffizielle Standard der Grid-Frameworks nicht nur übernommen, sondern das W3C hat versucht, diesen zu perfektionieren:
Horizonale und vertikale Ausrichtung der Elemente
Durch eine horizotale und vertikale Definition der Gird-Elemente werden die oben genannten Grenzen der bestehenden Grid-Frameworks beseitigt.
Keine Einschränkungen durch ein vordefiniertes Raster
Das Grid-Modul des W3C definiert kein vorgegebenes Raster. So kann die Anzahl der Spalten und Zeilen einfach für jedes verwendete Grid im Layout neu definiert werden.
Ein zentrales Steuerungselement
Während bei den herkömmlichen Grid-Frameworks jedem Element eine bestimme Grösse vergeben, wird die Vergabe der Grösse und Anordnung der Elemente bei den CSS-Grids über ein zentrales Steuerungselement definiert. Für die Anpassung des Layouts auf Smartphones und Tablets muss so nicht jedes Element angepasst werden, sondern nur im Steuerungselement (Grid-Container).
Wie funktioniert’s?
Anstelle der sturen Vorgaben eines Frameworks, entscheiden Programmierer über den Umfang des Grids, indem man dem Eltern-Element die Grid-Definition übergibt. Hierbei definiert man die Spalten- und Zeilenanzahl innerhalb des Elements. Diese werden als Fractions (Einheit fr) bezeichnet.
Man erhält so zu sagen ein Schachbrett von Fractions. Den Elementen innerhalb des Containers übergibt man nun die Information, welchen Platz dieses einnehmen soll und welche Spannweite in der Breite und Höhe dieses erhält.
Die Grundfunktion, welche Grid-Frameworks bieten, bleibt die gleiche. Jedoch wird mit CSS-Grids erweitert auch gewährleistet, komplexere Strukturen ohne Verletzung der Grundlage relativ einfach umzusetzen.
Der Heilige Gral des Webdesigns als CSS-Grid
Nachfolgend ein einfaches Beispiel, wie man CSS-Grids verwendet. Die vollumfängliche Dokumentation kann unter https://www.w3.org/TR/css-grid-1/ eingesehen werden.
Browser-Kompatibilität
CSS-Grids werden seit 2017 in allen modernen Browsern sowie im Internet Explorer mit dem -ms Prefix unterstützt.
Gemäss caniuse.com weisen jedoch folgende Browser noch diverse Anlaufschwierigkeiten aus (Stand Januar 2019):
- Safari: Innerliche und äusserliche Vergrösserungen mit Grid Properties
- Edge: Einige Probleme mit dem Support der calc()-Funktion innerhalb von Grid Properties
Aus eigener Erfahrung rate ich jedoch noch zur Vorsicht mit dieser jungen Technologie. Viele Properties werden im Internet Explorer und Safari entweder nicht oder nur beschränkt interpretiert. Dies kann unter Umständen zu Crossbrowser-Probleme führen. Also ist gutes Testing angesagt!
Wird nun CSS-Grids zur Ablösung von Grid-Frameworks führen?
Aus meiner Sicht werden herkömmliche Grid-Frameworks nicht komplett verschwinden, sondern sich eher anpassen und auf den CSS-Grids-Zug aufsteigen. So werden die Funktionalitäten der CSS-Grids wahrscheinlich in die Grid-Frameworks übernommen und mit zusätlichen Funktionen erweitert. So wird es auch in Zukunft noch eine Daseinberechtigung für diese Frameworks geben.
