CSS Grid in 5 Minuten verstehen — und in Responsive Sketch Layouts übertragen

Kurz gesagt: Eigentlich fast alle, die einem so in den Sinn kommen — und viele mehr. Eine gute Übersicht der gängigsten Formen mit CSS zum ausprobieren gibt es bei Grid by Example.

Ja, wir werden in Kürze über Sketch sprechen, aber auch wenn du „nur” als Webdesigner arbeitest, solltest du hier weiterlesen. Du musst das CSS später nicht schreiben, aber du solltest die Möglichkeiten und Grenzen verstehen, denn sonst hinkt das Design immer der Technologie hinterher und kann nie sauber umgesetzt werden. Keine Sorge, es ist nur ein bisschen HTML und CSS und beißt nicht.

HTML-Markup für unser Beispiel:

Ein div mit der Klasse .container enthält 5 Items/Elemente (es können natürlich auch mehr oder weniger sein). Wer möchte, kann gerne mit dem HTML- und CSS-Markup in CodePen selbst experimentieren.
>

Ich habe etwas CSS Styling hinzugefügt für die bessere Ansicht, nicht relevant für das Raster

Grundlage: Grid, Columns und Rows festlegen

Im CSS wandeln wir die Klasse .container ganz einfach in ein Grid, indem wir display:grid hinzufügen. Mit grid-template-columns aktivieren wir die gewünschten Spalten, in diesem Fall 5 Spalten mit je 250px und mit grid-template-rows können wir die Höhe der Zeile (falls erforderlich) einstellen, in diesem Fall 150px. Und das war’s, das erste Raster ist fertig!

> .container{
>   display: grid;
>   grid-template-columns: 250px 250px 250px 250px 250px;
>   grid-template-rows: 150px;
> }
> /* short form: */ 
> grid-template-columns: repeat(5, 250px);

Rasterabstände hinzufügen

Bei Bedarf kann mit Hilfe vongrid-gap ein beliebiger Abstand zwischen den Elementen hergestellt werden. Übrigens auch getrennt für horizontales und vertikales Raster mit grid-row-gap und grid-column-gap . Hier können alle gängigen Einheiten verwendet werden, z.B. px für feste Rinnen oder % für flexible Abstände etc.

> .container{
  display: grid;
  grid-template-columns: repeat(5, 250px);
  grid-template-rows: 150px;
  grid-gap: 30px;
}

Automatische Verteilung der Bildschirmbreite mit “fr”

Des Designers Traum! Mit Fractional Units kurz fr wird der verfügbare Platz nach Wunsch aufgeteilt! Hier teilen wir zum Beispiel die Bildschirmgröße in 6 Teile. Die erste Spalte nimmt 1/6 = 1fr des Raumes ein, die zweite Spalte 3/6= 3fr und dritte Spalte 2/6= 2fr

.container{

  display: grid;
  grid-template-columns: 1fr 3fr 2fr;
}

Alle Reihen flexibel

px und fr mischen für statische und flexible Spalten

px und fr können beliebig gemischt werden, der Rest passt sich dem verfügbaren Platz an.

.container{
  display: grid;
  grid-template-columns: 300px 3fr 2fr;
}

Erste Reihe fix durch px, restliches Layout flexibel

Absolute Freiheit in der Anordnung

Das Beste ist, dass die Elemente selbst im Grid beliebig viel Raum einnehmen und neu angeordnet werden können. Zu diesem Zweck wird ein Startpunkt mit grid-column-start gesetzt, und mit grid-column-end das Ende. Oder in Kurzform grid-column: startpoint / endpoint;

.container{
  display: grid;
  grid-template-columns: 1fr 3fr 2fr;
}
.item-1 {
 grid-column: 1 / 4;
}
.item-5 {
 grid-column: 3 / 4;
}

Lass dich nicht von den Gridlines verwirren, sie beginnen ganz am Anfang des ersten Elements!

Gleiches gilt für die vertikale oder ganzflächige Verteilung!

Hier kann CSS Grid besonders glänzen und seine Überlegenheit gegenüber Boostrap und Co. unter Beweis stellen. Elemente können nämlich mit Hilfe von grid-row auch alle vertikalen Größen und Positionen einnehmen. Wie wir im nächsten Beispiel sehen werden, ist dies ein absoluter Vorteil bei der Anpassung an unterschiedliche Bildschirmgrößen und Geräte.

.container{
  display: grid;
  grid-template-columns: 1fr 3fr 2fr;
}
.item-2 {
 grid-row: 1 / 3;
}
.item-1 {
 grid-column: 1 / 4;
 grid-row: 3 / 4;
}

Beliebige vertikale Breite und Position

Individuelle Anpassung an unterschiedliche Geräte? Klar!

Auch hier hat CSS Grid einen klaren Vorteil gegenüber herkömmlichen Grids, denn je nach Bildschirmgröße kann mit Media Queries nicht nur von flexiblen zu festen Elementen gewechselt, sondern auch die Position ganzer Elemente angepasst werden!

.container{
 display: grid;
 grid-template-columns: 250px 3fr 2fr;
}
.item-1 {
 grid-column: 1 / 4;
}
.item-2 {
 grid-row: 2 / 4;
}
@media only screen and (max-width: 720px){
  .container{
   grid-template-columns: 1fr 1fr;
  } 
  .item-1 {
   grid-column: 1 / 3;
   grid-row: 2 / 3;
  } 
  .item-2 {
   grid-row: 1 / 1;
  }
}

CSS Grid wird mittlerweile von allen modernen Browsern (Safari, Chrome, Firefox, Edge) nativ unterstützt. Mit einem globalen Support von 87.85% ist CSS Grids jetzt schon eine Alternative zu Boostrap und Co.

Stand: Oktober 2018 via caniuse.com

Ziemlich schnell und einfach. Mit der richtigen Ordnerstruktur und den entsprechenden Resizing Settings geht (fast) alles! Am besten direkt mitmachen, die offenen Sketch Dateien lassen sich direkt hier herunterladen.

Sketch Beispiel 1: Flexibles Raster mit fixen Abständen:

Der Trick besteht allein darin, die Elemente richtig in Ordnern anzuordnen, eigentlich genau so, wie wir es in CSS auch tun würden. Das Raster ist in der Breite und nach links fixiert, während der Objektordner selbst nur nach links fixiert ist und sich ansonsten frei an die Bildschirmgröße anpassen kann. Nicht vergessen, das Häkchen bei „adjust content to resize” für das gesamte Artboard zu klicken, sonst funktioniert es nicht!

Die Ordner (Elemente) können jetzt nach Belieben mit den verschiedenen Inhalten gefüllt werden. Danach kann man einfach das Artboard kleiner und größer ziehen — und fertig ist das CSS Grid Sketch Layout. So erkennt man sehr schön, wann ein harter Umbruch und separates Layout (z.B. für mobile Geräte) wirklich nötig sind. Auch zur Überprüfung von Schriftgrößen ist es ein absoluter Segen!

Im CSS wäre es übrigens ganz einfach das hier:

.container{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1f;
  grid-gap: 20px;
}
/*or in short*/  
grid-template-columns: 2fr repeat(3, 1fr);

Sketch Beispiel 2: Komplexeres Layout mit Umbruch

Wenn es kein einfaches Raster, sondern ein „richtiges” Layout werden soll, muss eigentlich nur die Ordnerstruktur durchdacht und die Resizing-Optionen für die jeweiligen obersten Ordner eingestellt werden.

Erster Schritt: Das Raster muss mit der richtigen Ordnerstruktur und den korrekten Resizing-Settings erstellt werden, hier gezeigt am Beispiel-Desktop.

Das Raster kann nun mit Inhalt gefüllt werden (natürlich sollte man auch Resize-Settings dafür festlegen, wie sich das Ganze innerhalb des Gitters verhalten soll. Wer sich dabei unsicher ist, kann am besten die Sketch-Arbeitsdatei komplett herunterladen). So kann man sehr schön die Ansicht für die gängigsten Geräte im Designprozess kontrollieren und sehen, wann ein harter Umbruch wirklich nötig ist — in unserem Beispiel etwa erst ab einer Breite von 1000px. Für die Übergabe an das Programmierteam reicht jeweils eine ausgewählte Breite pro Artboard (z.B. iPhone8 375px Breite und Desktop Large 1400px Breite) in InVision oder Zeplin.

Bei CSS wäre das übrigens folgendermaßen:

.container{ display: grid; grid-template-columns: 1fr 350px 350px; } .item-1 { grid-column: 1 / 4; } .item-2 { grid-row: 2 / 4; } .item-3 { grid-column: 2/4; } .item-4 { grid-column: 2/3; } .footer{ grid-column: 1 / 5; } @media only screen and (max-width: 1000px){ .container { grid-template-columns: 1fr 1fr; } .item-2 { grid-column: 1 / 3; grid-row: 4 / 5; } .item-3 { grid-column: 1 / 3; } .item-4 { grid-column: 1 / 2; } .item-5 { grid-column: 2 / 3; } }
Es braucht ein wenig Übung und Teamarbeit, um sich vom traditionellen 12-Raster zu lösen und den Kopf für ein CSS Grid-basiertes Layout freizubekommen, aber es lohnt sich definitiv. Die neue Flexibilität von CSS Grid ermöglicht es endlich, von generischen Seitenlayouts abzuweichen, ohne die Skalierbarkeit zu beeinträchtigen.

Aber es gilt auch hier: Weniger ist mehr. Denn je komplexer ein Raster wird, desto mehr „Tetris” wird es in der Programmierung. Auf den Punkt gebracht: Wenn die Sketch-Datei ein verschachtelter Albtraum ist, wird sich die Programmierung bei der Implementierung des Designs nicht viel anders anfühlen. Deshalb sollte man sich genau ansehen, was für welches Projekt realistisch ist und sich vorab mit dem Programmierteam absprechen.

Slack, Company Website

Medium, right here :)

Skyler Hughes, Fotografie

Max Böck, Front-End-Entwickler

Design+Code, Tutorials für Designer

Hi Agency, Deck, Template Seite

Natürlich gibt es noch etliche weitere Tipps, Tricks und Funktionen rund um CSS Grid, die besonders für Frontend-Programmierer interessant sind. Wer einen tieferen Einblick will, dem empfehle ich die detaillierte Beschreibung von Codrops der den kostenlosen Online-Kurs von Scrimba, dder auch Bootstrap und CSS Grid gut vergleicht.

Dieser Artikel wurde erstmals am 31. Oktober 2018 auf medium.com veröffentlicht ist hier verfügbar.