Ratgeber

CSS Grid: Das leistet das neue Layoutmodul

(Bild: Shutterstock / Agshin Rajabov)

Lesezeit: 4 Min.
Artikel merken

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.

Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

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:

Das könnte dich auch interessieren

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

Bitte schalte deinen Adblocker für t3n.de aus!

Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Digitales High Five
Holger Schellkopf (Chefredakteur t3n)

Anleitung zur Deaktivierung

Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder