CSS Grid: Das leistet das neue Layoutmodul

(Bild: Shutterstock / Agshin Rajabov)
Wozu noch ein weiteres CSS-Layout?
CSS hat in den letzten Jahren gerade im Layout-Bereich einige neue Konzepte eingeführt. Waren Floats lange Zeit der Standard, so kamen mit Flexbox und dem oft unterschätzten Column-Layout zwei noch recht junge Konzepte hinzu, die Webdesignern eine gewaltige Menge an Gestaltungsmöglichkeiten einräumten. Nun also das Grid – was unterscheidet es von seinen Alternativen?
Eine erste Antwort liefert der Blick in die aktuelle W3C Candidate Recommendation. Dort wird das Grid-Layout folgendermaßen eingeführt: „A two-dimensional grid-based layout system, optimized for user interface design“
Das CSS-Grid ermöglicht, im Unterschied zu allen anderen CSS-Layoutmodulen, die Definition abstrakter, zweidimensionaler Layouts. In Flex oder Float hingegen sind für zweidimensionale Layouts immer mehrere verschachtelte Ebenen von Containern nötig. Das reduziert überflüssiges HTML-Markup und vereinfacht das Design.
Der zweite wichtige Aspekt: Das CSS-Grid ist ausdrücklich für das UI-Design optimiert. Das schließt Websites ein, zielt aber tatsächlich auf das wichtige Segment von Web-Apps und SPAs, die mit dem Grid-Layout ein extrem flexibles, ausdrucksstarkes und trotzdem hinreichend einfaches Instrument erhalten, um responsive Applikationslayouts zu definieren. In diesem Bereich wird das CSS-Grid seine Vorteile voll zur Geltung bringen können.
So definiert man ein CSS-Grid
Ein CSS-Grid ist schnell und einfach erzeugt. Das folgende CSS definiert ein 3×3-Gitter mit insgesamt vier explizit benannten „Grid Areas“.
.container {
display: grid;
grid-template-areas:
"top top top"
"content content sidebar"
"foot foot foot"
}
Es ist sofort erkennbar, dass der Ansatz des CSS-Grid sich von bisherigen Layoutingmöglichkeiten unterscheidet. Das Grid wird komplett unabhängig von HTML-Containern definiert. Ein HTML-Element, welches nun die Klasse „container“ erhält, hat nun die Möglichkeit, seine Kindelemente auf das oben definierte Grid zu platzieren. Dazu müssen diese noch wissen, auf welche Position im Grid sie sich einordnen sollen. Dies erledigt man mit Hilfe einer weiteren CSS-Property.
.container > header {
grid-area: top
}
.container > main {
grid-area: content
}
.container > aside {
grid-area: sidebar
}
.container > footer {
grid-area: foot
}
Auch hier gilt: Die Anordnung der HTML-Elemente auf dem Grid ist völlig unabhängig vom tatsächlichen Markup oder der Reihenfolge im Quellcode – ein deutlicher Vorteil gegenüber Flexbox. Das CSS-Grid löst auch lange bekannte Layout-Probleme, wie zum Beispiel die vertikale Zentrierung von Inhalten oder das Erstellen mehrerer dynamischer Spalten mit gleicher Höhe, auf elegante Art und Weise.
Natürlich spielt responsives Design eine wichtige Rolle für das CSS-Grid-Layout. Nutzt man ein solches Grid, lässt sich in Media Queries die Anordnung der benannten Bereiche („Grid Areas“) frei verändern. So werden dreispaltige Layouts wie das oben gezeigte auf dem Smartphone zu einer Spalte, auf XL-Screens kann eine vierte hinzu kommen.
Die wichtigsten Funktionen des CSS-Grid im Überblick
Das CSS-Grid leistet noch deutlich mehr als dieses simple Beispiel zeigt. Zum weiteren Funktionsumfang gehören:
- Die neue CSS-Einheit „fr“, die, ganz ähnlich wie die Flexbox-Properties „flex-grow“ und „flex-shrink“, einen Anteil („Fraction“) des freien Raums im Grid repräsentiert. Im Zusammenspiel mit absoluten Einheiten wie „rem“ oder „px“ ermöglicht sie die Definition von fluiden Layouts, deren Inhaltsbereich mit dem Screen mitwächst. Das ist eine typische Layout-Anforderung von SPAs und ein Schwachpunkt bisheriger Layout-Modelle.
- Die Definition eines sauberen „Gutters“, d.h. Abständen zwischen den einzelnen Grid-Zeilen bzw. -Spalten. Dies war bisher ein wesentlicher Grund für den Einsatz von CSS-Frameworks wie Bootstrap oder Foundation. Wer künftig das Grid nutzt, kann deren Einsatz gegebenenfalls überdenken.
- Verschachtelte Grids: Grid Items können selbst wiederum Grid Container werden. So lassen sich auch komplexere, dynamische Layouts sauber auf das Grid legen. Das erleichtert das Zusammenspiel mit CSS-Patterns wie BEM / Atomic Design. Elemente können sich außerdem auch auf dem Grid überlappen und sich die selben Grid Areas teilen.
- Kontrolle über den Grid-Flow mithilfe der Property „grid-auto-flow“. Damit lässt sich explizit festlegen, ob und wie Elemente automatisch auf einem Grid platziert werden. Interessant ist hier vor allem der Wert „dense“, der automatisch „Lücken“ im Grid mit Elementen passender Größe füllt und so beliebte Plugins wie Masonry ersetzen könnte.
Fazit zum CSS-Grid
Viele UI-Designer sind zu Recht begeistert von den Möglichkeiten, die das Grid-Layout bietet. Im Vergleich mit Flexbox oder gar Float-basierten Layoutsystemen verfügt die neue Spezifikation über ein deutlich mächtigeres Set an Möglichkeiten. Sie sollte jedoch nicht unbedacht eingesetzt werden – nicht für jeden Anwendungsfall ist das Grid geeignet, im schlimmsten Fall macht es simple Layouts unnötig kompliziert. Wir sind dennoch der Meinung, dass das CSS-Grid gerade im Bereich der Webanwendungen, SPAs und Cross-Platform-Apps ideal eingesetzt werden kann und sind gespannt auf die Designideen, die damit umgesetzt werden. Bleibt noch zu sagen: Browser aktualisieren, damit ihr möglichst schnell in den Geschmack des Grid-Layouts (zum Beispiel hier bei Sandstorm Media) kommen könnt!
Zum Weiterlesen:
Ganz toll. Komme gerade erst mit Flexbox so richtig klar :P
Wird aber noch ne weile dauern bis man es benutzen kann, da ältere browser dies ja nicht unterstützen, oder liege ich da falsch?
ie10, ie11 und edge jeweils mit prefix (ms), chrome aktuellste version, firefox aktuellste version, safari aktuellste version funktionieren. nur android browser hängt noch nach..
Vorsicht mit den geprefixten IE-Versionen. Die beruhen auf dem working draft von 2011 und haben eine ganz andere syntax. Ich würd eheer davon ausgehen dass IE und das grid keine Freunde mehr werden ;)
Siehe: http://caniuse.com/#search=grid
Die verlinkte Sandstormseite ist aktuell mit flexbox umgesetzt, nicht mit grid.