Gestaltung mit CSS Grids

Alle Websites bestehen aus Inhaltselementen, die auf-, unter- und nebeneinander verteilt und manchmal auch übereinander gestapelt werden. Innerhalb dieser Elemente befinden sich Texte, Bilder, Videos, Graphiken und Fotos. Ob du diese Elemente Kästen, Kisten, Boxen oder Tabellen nennst, ist egal. So grundsätzlich geht es hier um einen Plan (Layout, Struktur) und die sehr grundsätzliche Gestaltung eine Site. Solche Pläne sind nicht neu und seit mehr als 500 Jahren bei bedrucktem Papier ebenfalls ein großes Thema. Es geht dabei immer um Rastersysteme, Verhältnisse, Ränder und Abstände. Sind beim Druck auf Papier zumindest die Größe der Ausgabe und die Seitenverhältnisse bekannt, so ist das bei Websites nicht mehr wirklich der Fall. Es ist nicht mehr vorhersehbar auf welchem Endgerät die Website angezeigt wird.

Vereinfacht meine ich so etwas wie im Screenshot dargestellt. In CSS spricht man von einem Grid Layout.

In der kurzen Geschichte des Webs benutzte man zunächst Tabellen, dann das sogenannte Box Modell und danach CSS Flex Box. Und weil das alles nicht so wirklich trivial ist und war, Stichwort „floaten“, gab und gibt es Frameworks wie Bootstrap und Foundation, die das Erstellen eines Grid Layouts erheblich vereinfachten, aber auch mit vielen anderen Sachen anreicherten, die eigentlich wieder nicht nötig waren und Kosten von Geschwindigkeit und Flexibilität gingen.

CSS Grid

Der aktuelle Stern am Himmel heisst CSS Grid und läuft mittlerweile in allen aktuellen Browsern stabil. Die CSS Grid Technik wird momentan in keinem Framework verwendet. In diesem Blogeintrag will ich die Grundlagen von CSS Grid zeigen. Mein HTML Markup sieht so aus:

<div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <!-- ... mehr davon -->
</div>

Und der CSS Teil sieht so aus:

body {
  margin: 40px;
}

.wrapper {
}

.box {
  background-color: #555;
  color: #fff;
  border-radius: 10px;
  padding: 25px;
  font-size: 150%;
}

Wenn ich den Code in jsfiddle aufrufe, sieht es so aus:

Die drei Elemente mit der „Box“ Klasse werden untereinander dargestellt und von einem Grid ist noch keine Spur. Die „wrapper“ Klasse ist allerdings auch noch leer. Hier füge ich jetzt ein paar Kommandos ein: Mit display lege ich die Art der Darstellung fest (grid), mit grid-template-columns drei Spalten à 100px, mit grid-gap einen Abstand von 10 Prozent zwischen den Elementen und mit background-color den Hintergrund auf weiß.

.wrapper {
  display: grid; 
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px; 
  background-color: #fff;
}

Nun sind die drei Elemente nebeneinander. Wenn ich mehr Elemente hinzufüge, werden diese ebenfalls angeordnet. Die Spaltenbreiten und Zwischenräume können einfach angepasst werden.

Responsive CSS Grids

Das ist ja alles ganz schick, aber wie soll das responsiv werden, wenn wir mit Pixelangaben arbeiten?  Für diesen Fall gibt eine neue Einheit mit dem Namen fr für fractional unit. Eine fractional unit ist genau ein Teil des Grids, in meinem Fall also ein Drittel. Der Effekt ist überzeugend und es lassen sich sogar fractional units und pixel mischen.

Wenn die Grids größer und komplexer werden, gibt es den repeat Parameter um die fr Werte zu wiederholen. Aus 1fr 1fr 1fr wird dann repeat(3, 1fr). Auch Gruppen wie 1fr 2fr lassen sich wiederholen:

Ein wichtiger Aspekt ist die Laufrichtung. Sollen die Elemente von links nach rechts (row) oder von oben nach unten (column) angeordnet werden?

Fazit

Es funktioniert gut, einfach und recht logisch und es lohnt sich, sich näher mit dem Thema zu beschäftigen.

Links

• Das ist die Vorlage zu diesem Blogeintrag mit mehreren Videos gridbyexample.com/learn/
• wiki.selfhtml.org/wiki/CSS/Tutorials/Layout_mit_Grid

tl;dr: CSS Grids bringen frischen Wind in das Layout einer Website