How-To

Statt Bootstrap: So funktioniert das CSS-Grid-Layout

(Grafik: Adobe Stock - ariyodesign )

Mit CSS-Grid-Layout können Webdesigner digitale Gestaltungsraster ganz leicht selbst erstellen. Hier sind die wichtigsten Funktionen.

Es gibt Dinge, bei denen die Frage aufkommt, warum es eigentlich so lange gedauert hat, bis es sie endlich gibt. Die CSS-Spezifika­tion „Grid Layout“ gehört dazu. Lange Zeit mussten Webentwickler Gridsysteme wie Bootstrap nutzen, um Gestaltungsraster zu erstellen. Bootstrap ist mehr als einfach nur ein Gridsystem. Und so bringt es – wie viele andere Gridsysteme auch – viel zu viele Funktionen und überflüssigen Code mit sich. Das hat endlich ein Ende – und zwar mit den nativen CSS-Grid-Eigenschaften.
Mit ihnen können Webdesigner mit weniger Code bessere Grid-Layouts entwickeln.

Ein Flexbox-Raster funktioniert nur eindimensional. Mit dem CSS-Grid- Layout lassen sich digitale Gestaltungsraster hingegen in zwei Dimensionen beschreiben.

Eigene Gestaltungsraster nach individuellen Anforderungen selbst definieren zu können, hat Vorteile – nicht nur für das Seiten-, sondern auch für die Modullayouts. Aber was ist der Unterschied zur CSS-Einstellung „Flexbox“, die „Floats“ als CSS-Technik für Grid-Layouts bei vielen Entwicklern abgelöst hat?

Wer Layouts wie gewohnt in zwölf Spalten aufbauen und nur die darunterliegende CSS-Technik verändern will, für den klingt es zunächst logisch und einfach, Flexbox zu verwenden. Deshalb nutzt auch Bootstrap ab Version 4 die Flexbox-Grids. Dennoch hat CSS-Grid einen entscheidenden Vorteil: Die Raster sind zweidimensional. Bildlich gesprochen funktionieren Flexbox-Raster einzeilig („flex-wrap: wrap“ mal ignoriert), also Zelle für Zelle auf einer Zeile ohne Umbruch. Ein CSS-Grid-Layout lässt sich dagegen über mehrere Zeilen aufbauen. Das zeigen spätestens die Funktionen für asynchrone und Off-Grids weiter unten. Bei einem einfachen Seitenlayout mit einer Spaltigkeit für „header“ und „footer“ verbindet Flexbox diese Zellen untereinander nicht – CSS-Grid-Layout schon. Hier gibt es für diesen Zweck ein so genanntes Grid-Template.

Ein dreispaltiges Beispielraster

Ein einfaches Beispiel für den Einstieg macht dies deutlich. Der folgende Code beschreibt einen Komponentencontainer mit vier Inhaltscontainern.

Komponenten- und Inhaltscontainer (.box)

<div class=“wrapper“>
     <div class=“box a“>.a</div>
     <div class=“box b“>.b</div>
     <div class=“box c“>.c</div>
     <div class=“box d“>.d</div>
 </div>

So sieht das dreispaltige Gestaltungsraster aus diesem Beispiel in der Layoutansicht aus.

Diese Komponenten erhalten nun ein dreispaltiges Grid-Layout, indem die CSS-Display-Eigenschaft „Grid Layout“ den entsprechenden Wert erhält:

Dreispaltiges Grid-Layout erstellen

/* grid layout, 3 columns */
 .wrapper {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr; /* 1 fraction
 */    
 }

Die Anweisung „display: grid“ ist wie „display: flex“ eine neue ­Display-Eigenschaft des Container-Elements, die alle direkten Kinder zu Grid-Elementen macht. Zu den neuen Layouteigenschaften bringt CSS Grid auch eine neue Maßeinheit mit. Grid-Zellen­größen lassen sich nun in „fr“ (fraction) angeben. Die Größe eines Rasters können Webdesigner aber auch mit allen gängigen Maßeinheiten erstellen: Mit Prozent- oder Pixelwerten sowie weiteren Breiteneinheiten.

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

Ein Kommentar
Florence Maurice
Florence Maurice

Bei Autoprefixer muss man explizit angeben, dass die Gridangaben für IE/Edge<16 erzeugt werden sollen:
"grid: true will enable Grid Layout prefixes for IE."
Und das dann im IE zu testen ist empfehlenswert, weil ja doch eine Reihe von Features (grid-gap, grid-template) in der Gridvorversion noch nicht funktioniert. Am störendesten finde ich, dass man für den IE alle Elemente explizit platzieren muss – in der STandardversion ordnen die sich auch ohne explizite Positionierung an, beim IE würden die ohne Angaben übereinander gestapelt. Es gibt eine Reihe von Gridlayouts, die sich deshalb nicht im IE umsetzen lassen.