Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

CSS Grid: Das leistet das neue Layoutmodul

    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.

Anzeige

So definiert man ein CSS-Grid

Ein CSS-Grid ist schnell und einfach erzeugt. Das folgende CSS definiert ein 3x3-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.

Finde einen Job, den du liebst

5 Reaktionen
fabianj
fabianj

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

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

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

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden