Statt Bootstrap: So funktioniert das CSS-Grid-Layout

35 SHARESTEILENTWITTERNTEILENTEILENMAILEN

Statt Bootstrap: So funktioniert das CSS-Grid-Layout
(Grafik: Adobe Stock – ariyodesign )

31.08.2017, 14.46 Uhr

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.NÄCHSTE SEITE 

  • Seite:
  • 1
  • 2
  • 3

Autor: Sven WolfermannVERWANDTE THEMENBrowserCSSWebdesign