kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS Grids – Einführung in Gestaltungsraster mit dem Grid Layout Module

Komplexe Weblayouts lassen sich weder mit float-basierten Gestaltungsrastern noch mit Flexbox perfekt umsetzen. Die Floating-Technik wurde nicht zur Konstruktion komplexer Layouts entwickelt, was wir u.a. daran merken, dass wir Elemente nicht nach oben und unten verschieben können. Flexbox ermöglicht es zwar die Gestaltung vollständig vom HTML-Code zu trennen, bietet sich aber eher für lineare Strukturen an als für verschachtelte. CSS Grids ermöglichen »echte« Gestaltungsraster auf Basis von CSS. In diesem Beitrag beschreiben wir, wie Layouts mit Hilfe von CSS Grids konstruiert werden können.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

Grundlegende Funktionsweise

CSS Grids arbeiten mit einem Elternelement, in dem das Raster definiert wird und mit darin enthaltenen Kind-Elementen, die im Raster positioniert werden. Dem Elternelement wird mit Hilfe der Angabe
display:grid; mitgeteilt, dass CSS Grids genutzt werden sollen. Mit Hilfe der Eigenschaften grid-template-columns und grid-template-rows werden Rasterlinien gezeichnet.

Das folgende Beispiel erzeugt ein CSS Grid mit drei Zeilen und vier Spalten. Die erste Zeile ist 200 Pixel hoch, die letzte 100 Pixel. Die mittlere Zeile hat die Angabe
1fr (1 Fraction) erhalten. Damit erstreckt Sie sich über den noch freien Platz. Die vier Spalten sind jeweils 25% breit.

.container { 
  display: grid; 
  grid-template-rows:200px 1fr 100px; 
  grid-template-columns:25% 25% 25% 25%; 
}

css-grid-rows-columns

Wenn innerhalb des Elternelements nun Kind-Elemente liegen, fügen sich die Inhalte automatisch von oben links oben nach rechts unten in die Rasterzellen ein.

<div class="container"> 
 <div>Element 1</div> 
 <div>Element 2</div> 
  … 
 <div>Element 11</div> 
 <div>Element 12</div> 
</div>

Standardmäßig ordnen sich die Elemente zeilenbasiert an:

Die Zahlen zeigen in welcher Reihenfolge die Kind-Elemente im Grid positioniert werden
Die Zahlen zeigen in welcher Reihenfolge die Kind-Elemente im Grid positioniert werden

Mit der CSS-Eigenschaft
grid-auto-flow kann beeinflusst werden, nach welcher Regel die Kind-Elemente im Raster einsortiert werden. Der Wert
column führt beispielsweise zu folgender Anordnung:

.container { 
  display: grid; 
  grid-template-rows: 200px 1fr 100px; 
  grid-template-columns: 25% 25% 25% 25%; 
  grid-auto-flow: column; 
}
Die Zahlen zeigen an, in welcher Reihenfolge die Kind-Elemente im Grid positioniert werden
Die Zahlen zeigen an, in welcher Reihenfolge die Kind-Elemente im Grid positioniert werden

Elemente im Raster positionieren

Mit CSS Grids ist es möglich, Elemente völlig frei im Raster zu positionieren. Dazu wird den Kind-Elementen mit Hilfe der CSS-Eigenschaften
grid-row-start und grid-row-end bzw. grid-column-start und grid-column-end mitgeteilt, wo sie sich im Raster befinden sollen. Bitte beachtet, dass die Positionierung nicht über Rasterspalten, sondern über Rasterlinien erfolgt. Das zuletzt gezeigte Layout besitzt beispielsweise vier Spalten und somit fünf Rasterlinien (bei 0%, 25%, 50%, 75% und 100%). Wenn nun ein Element über die volle Breite des Layouts gestreckt werden soll, dann streckt es sich von Rasterlinie 1 (bei 0%) bis 5 (bei 100%).

CSS Grid mit eingezeichneten Rasterlinien und farbig hervorgehobenen Layoutelementen
CSS Grid mit eingezeichneten Rasterlinien und farbig hervorgehobenen Layoutelementen

Das folgende Code-Beispiel verdeutlicht die Positionierung von Elementen im Raster.

Beispiel anschauen

<div class="container"> 
  <header>header</header> 
  <article>article</article> 
  <aside>aside</aside> 
  <footer>footer</footer> 
</div>
.container { 
  height:100vh; 
  display: grid; 
  grid-template-rows: 200px 1fr 100px; 
  grid-template-columns: 25% 25% 25% 25%; 
} 
header { 
  background:tomato; 
  grid-column-start:1; 
  grid-column-end:5; 
  grid-row-start:1; 
  grid-row-end:2; 
} 
article { 
  background:gold; 
  grid-column-start:1; 
  grid-column-end:4; 
  grid-row-start:2; 
  grid-row-end:3; 
} 
aside { 
  background:lightgreen; 
  grid-column-start:4; 
  grid-column-end:5; 
  grid-row-start:2; 
  grid-row-end:3; 
} 
footer { 
  background:lightblue; 
  grid-column-start:1; 
  grid-column-end:5; 
  grid-row-start:3; 
  grid-row-end:4; 
}

Kurzschreibweise

Es existieren auch die Kurzschreibweisen
grid-column bzw. grid-row. Hierbei werden Start- und End-Rasterlinie mit Slash voneinander getrennt.

header { 
  grid-column:1 / 5; 
  grid-row:1 / 2; 
}

…

Beispiel anschauen

Benannte Rasterlinien

Die einzelnen Rasterlinien können auch benannt werden. Dazu wird bei der Definition des Rasters mittels
grid-template-rows bzw. grid-template-columns der gewünschte Name in eckigen Klammern zwischen die Breitenangaben der Spalten geschrieben. Es ist auch mehr als eine Bezeichnung pro Position erlaubt.

.container { 
 height:100vh; 
 display: grid; 
 grid-template-rows: [line-h-1] 200px [line-h-2] 1fr [line-h-3] 100px [line-h-4]; 
 grid-template-columns: [line-v-1] 25% [line-v-2] 25% [line-v-3] 25% [line-v-4] 25% [line-v-5]; 
}

Bei der Zuweisung der Kind-Elemente wird dann anstelle der Nummer der Spalte bzw. Zeile der jeweilige Name angegeben.

header { 
  grid-column: line-v-1 / line-v-5; 
  grid-row: line-h-1 / line-h-2; 
}
 
…

Beispiel anschauen

Benannte Raster-Bereiche (Rasterzellen)

Die einzelnen Bereiche des CSS-Grids können mit Hilfe des Befehls grid-template-areas bei der Definition des Rasters im Elternelement benannt werden. Dazu werden die einzelnen Zellen innerhalb einer Zeile mit Namen versehen. Die einzelnen Namen werden mit Leerzeichen von einander getrennt. Einzelne Zeilen stehen in Anführungsstrichen. Durch eine sinnvollste Strukturierung im Code, kann so der Layoutaufbau im Stylesheets »sichtbar« gemacht werden.

.container { 
  height:100vh; 
  display: grid; 
  grid-template-rows: 200px 1fr 100px; 
  grid-template-columns: 25% 25% 25% 25%; 
  grid-template-areas:  
    "header header header header" 
    "content content content sidebar" 
    "footer footer footer footer" 
  ; 
}

Um Kind-Elemente einem benannten Bereich im Raster zuzuweisen, wird der Befehl grid-area verwendet.

header { 
  grid-area: header; 
} 
article { 
  grid-area: content; 
} 
aside { 
  grid-area: sidebar; 
} 
footer { 
  grid-area: footer; 
}

Beispiel anschauen

Leere und undefinierte Bereiche im Raster kennzeichnen

Wenn Bereiche im Raster leer bleiben sollen, dann wird dafür ein Punkt als Platzhalter verwendet. Wenn der Bereich nicht definiert werden soll, kommt das Schlüsselwort none zum Einsatz.

grid-template-areas:  
  "header header header header" 
  "content content . sidebar" 
  "footer footer footer footer" 
;

Beispiel anschauen

Abstände zwischen Rasterzellen

Wenn Abstände zwischen den Spalten bzw. Zeilen des Rasters entstehen sollen, kann mit Hilfe der Befehle grid-column-gap bzw. grid-row-gap im Elternelement eine Breite für die Rasterlinien festgelegt werden. Bitte beachtet, dass die Abstände nur zwischen Spalten erzeugt werden. Die erste und letzte Rasterlinie bleibt also unverändert.

.container {
  grid-row-gap: 20px; 
  grid-column-gap: 10px;
  /* weitere eigenschaften */
}

Die Kurzschreibweise grid-gap existiert ebenfalls:

.container {
  grid-gap: 20px 10px; 
  /* weitere eigenschaften */
}
Raster mit eingezeichneten Abständen zwischen den Spalten bzw. Zeilen
Raster mit eingezeichneten Abständen zwischen den Spalten bzw. Zeilen

Beispiel anschauen

Ausrichtung innerhalb des Rasters

In den bisherigen Beispielen strecken sich die Kind-Elemente immer über die volle Fläche einer Rasterzelle, obwohl eigtl. weniger Inhalt enthalten ist. Sowohl für das Elternelement als auch für die einzelnen Kind-Elemente kann dieses Verhalten verändert werden.

Globale Ausrichtung im Eltern-Element festlegen

Die Befehle für das Eltern-Element lauten justify-items für das horizontale Verhalten, und align-items für das vertikale Verhalten. Es stehen jeweils die Werte start, end, center und stretch zur Wahl. stretch ist der Standardwert und selbstverständlich können justify-items und align-items kombiniert werden.

Positionierungen von Elementen im Raster mit Hilfe der Befehle justify-items und align-items
Positionierungen von Elementen im Raster mit Hilfe der Befehle justify-items und align-items

Beispiel anschauen

Individuelle Ausrichtung im Kind-Element festlegen

Wenn lediglich die Ausrichtung einer einzelnen Rasterzelle verändert werden soll, stehen dafür die Befehle align-self und justify-self zur Verfügung. Auch für diese Eigenschaften existieren die Werte start, end, center und stretch.

article { 
  align-self: start; 
}

Beispiel anschauen

Responsive CSS Grids

Wenn es um die Anpassung des Layouts für verschiedene Displaygrößen geht, bieten sich CSS Grids ebenfalls sehr gut an. Mit Hilfe von Media Queries kann das Raster neu definiert und die Kind-Elemente neu zugewiesen werden.

.container { 
  height:100vh; 
  display: grid; 
  grid-template-rows: 80px 4fr 1fr 40px; 
  grid-template-columns: 100%; 
  grid-template-areas:  
    "header" 
    "content" 
    "sidebar" 
    "footer" 
  ; 
} 
@media screen and (min-width: 44.001em) { 
  .container { 
    grid-template-rows: 200px 1fr 100px; 
    grid-template-columns: 25% 25% 25% 25%; 
    grid-template-areas:  
      "header header header header" 
      "content content content sidebar" 
      "footer footer footer footer" 
    ; 
  } 
}

Beispiel anschauen

Die repeat()-Funktion

Wenn innerhalb des Grids Bereiche wiederholt werden sollen, so kann dafür die repeat()-Funktion genutzt werden. Der 1. Wert in repeat() steht für die Anzahl der Wiederholungen. Anschließend folgenden die gewünschten Grid-Eigenschaften.

Der folgende Code wiederholt das Grid für Zeilen zwei Mal, und das für Spalten drei Mal.

.container { 
  display:grid;
  grid-template-rows: repeat(2, 100px 50px);
  grid-template-columns: repeat(3, 200px 1fr 200px);
}

Anstelle der repeat()-Funktion könnte auch manuell folgender Code geschrieben werden.

.container { 
  display:grid;
  grid-template-rows: 100px 50px 100px 50px;
  grid-template-columns: 200px 1fr 200px 200px 1fr 200px 200px 1fr 200px;
}

Abgrenzung zu Flexbox

Das Flexbox-Layoutmodell erfreut sich großer Beliebtheit, weshalb häufig gefragt wird, worin der Vorteil von CSS Grids besteht. Flexbox bietet sich besser für lineare Strukturen an, CSS Grids für komplexe verschachtelte Konstruktionen. Ich könnte mir daher gut vorstellen, dass CSS Grids in Zukunft für das globale Layout und Flexbox für einzelne Komponenten eingesetzt wird.

Tools

Es existieren einige Online-Tools, die das Erlernen von CSS Grids, sowie den Umgang damit erleichtern. Wir haben unter folgendem Link einige Tools zusammengestellt: CSS Grid Tools

Browsersupport

Den Browsersupport für CSS Grids entnehmt ihr bitte der Website caniuse.com. Ein Polyfill zur Implementierung in inkompatiblen Browsern findet ihr hier.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

16 Kommentare

  1. Michael Bleicher

    Verfasst am 13. Dezember 2013 um 9:14 Uhr.

    Der Artikel ist sehr gut beschrieben, Dankeschön. Leider macht uns Webdesignern der Browsersupport wieder einmal einen Strich durch die Rechnung. Hoffen wir auf eine schnelle Implementierung.

  2. AT

    Verfasst am 7. Oktober 2014 um 11:24 Uhr.

    Ein sehr interessanter Beitrag!
    Wenn ich das richtig verstehe, kann man damit auch Zellen frei lassen und die Website, grob gesagt, wie eine Exceltabelle gestalten!?

    Schade nur, dass bis heute der Browsersupport immernoch eine Katastrophe ist :(

    P.S.: Dein Videotraining verschlinge ich gerade und es ist für mich als Anfänger genial!!!

  3. Uwe Wagner

    Verfasst am 12. November 2014 um 12:51 Uhr.

    Danke für den gelungenen Beitrag.
    Ich bin zwar schon lange als Software-Entwickler tätig, möchte mich jetzt aber in das Thema HTML5 und CSS3 einlernen.
    Wie meine Vorredner schon sagten, ist der einzige (aber bedeutende) Wehrmutstropfen die leidige Browserkompatibilität.

  4. Franz Meyer

    Verfasst am 17. Mai 2016 um 11:09 Uhr.

    Auch ich möchte mich für diesen Artikel bedanken.
    Der fehlende Browsersupport ist natürlich nicht optimal aber hierfür gibt es folgende Lösungen:
    https://github.com/FremyCompany/css-grid-polyfill
    https://github.com/codler/Grid-Layout-Polyfill

  5. David

    Verfasst am 17. Mai 2016 um 11:30 Uhr.

    Super Artikel. Das Thema geistert ja schon ein Stückchen herum aber irgendwie fand ich das immer recht schwer zu verstehen. Grundsätzlich ist klar was passiert aber wie gesagt, so gut beschrieben wie bei dir war es noch nirgends. Daumen Hoch dafür!

    Aber wie oben die anderen schon schrieben ist es halt aktuell nicht nutzbar. Mal schauen wann da nachgelegt wird.

  6. Jonas Hellwig

    Verfasst am 17. Mai 2016 um 11:44 Uhr.

    Das Thema Browser-Support ist nur dann kritisch, wenn man von öffentlichen Websites ausgeht. Bei Intranets oder bei anderen Lösungen die auf Webtechnologien basieren, aber keine Websites sind (Maschinensteuerung etc.), ist es durchaus denkbar CSS Grids schon heute einzusetzen.

    • Sven

      Verfasst am 27. Mai 2016 um 7:56 Uhr.

      ABer gerade der Punkt „öffentliche Webseite“ ist der entscheidende Punkt. Bei einem Support global von nicht mal 8%, ist das aktuell einfach noch nicht praktikabel einsetzbar. So schön das Ganze auch ist.

  7. Manuel

    Verfasst am 18. Mai 2016 um 4:10 Uhr.

    Eine spannendes Werkzeug zur Gestaltung von Layouts. Verwunderlich finde ich nur, dass aktuell (18.05.16) IE / Edge eine teilweise Unterstützung bieten. Ich bleibe vorerst bei den Flexboxen, behalte die Technik aber im Hinterkopf :)

  8. Dean

    Verfasst am 24. Mai 2016 um 15:56 Uhr.

    Guter Artikel. Ich sehe aber leider keinen Sinn in CSS Grids. Sie sind zu komplex von der Einstellung und Verhalten sich, auch für großes Projekte, schlechter, als Flexbox. Habe bereits erfolgreich und ohne Probleme große Projekte mit Flexbox auch responsive umsetzen können. Lief alles wie am Schnürchen.

  9. dennis

    Verfasst am 16. März 2017 um 10:10 Uhr.

    Schließe mich Dean an. Die Grid(s) sind einfach zu groß. Allein aus SEO Sicht ist das schlecht. Da werden riesige Datenmengen geladen, die bei einem Flexbox Aufbau nicht vorhanden wären.

  10. Andreas Grünert

    Verfasst am 5. April 2017 um 14:15 Uhr.

    Hallo,
    vielen Dank für den Artikel.
    Habe es ausprobiert. Firefox und Chrome zeigen das gewünschte Aussehen. Bei IE und Edge geht es nicht. Die Boxen sind verschoben. (auch nicht mit -ms- )
    Wie kann man den Code möglichst einfach anpassen, damit auch in IE und Edge das gleiche Bild erscheint?

    Mit freundlichen Grüßen

    Andreas Grünert

  11. Frank Ludwig

    Verfasst am 23. Juni 2017 um 10:43 Uhr.

    Super erklärt.

    Danke Jonas.

    viele Grüße,
    Frank

  12. Toby

    Verfasst am 18. August 2017 um 16:03 Uhr.

    An alle Ungläubigen die immer noch nicht wahr haben wollen, dass es Wirklichkeit ist:
    CSS Grids werden mittlerweile von ALLEN Browsern unterstützt – und wer das nicht glauben mag – die Spezifikation wurde von Microsoft / IE / Edge Entwicklern gepusht:

    http://caniuse.com/#search=grid

    Danke für den Beitrag.

  13. B. Nikola

    Verfasst am 14. Oktober 2017 um 0:05 Uhr.

    Danke für den super Beitrag !

    Ich teste gerade eine HP mit der Möglichkeit einen grid-Raum zu markieren. Hintergrund: Man erstellt sich ein grid nach Millimeter-Papier-Art (z.B. HD-TV 1920*1080) und positioniert hier, screen-abhängig,… nur mal so als Idee.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.