Ratgeber

CSS Grid: Das leistet das neue Layoutmodul

(Bild: Shutterstock / Agshin Rajabov)

Nach langer Entwicklungszeit steht das neue CSS-Grid-Layout in den Browser-Startlöchern. Wir geben einen Überblick und zeigen, wie sich das Grid im Vergleich mit Flexbox und anderen schlägt.

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.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

5 Kommentare
peter
peter

Ganz toll. Komme gerade erst mit Flexbox so richtig klar :P

Antworten
Simao

Wird aber noch ne weile dauern bis man es benutzen kann, da ältere browser dies ja nicht unterstützen, oder liege ich da falsch?

Antworten
webworker
webworker

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..

Antworten
Bastian Heist
Bastian Heist

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

Antworten
fabianj
fabianj

Die verlinkte Sandstormseite ist aktuell mit flexbox umgesetzt, nicht mit grid.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.