Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 14. Dezember 2018

HTML5: Moderne Layouts mit CSS-Grids

Als es noch kein CSS und kei­ne Trennung zwi­schen Inhalt und Gestaltung einer Website gab, war es üblich, Weblayouts als Tabelle zu gestal­ten. Mit der stei­gen­den Bedeutung einer seman­ti­schen HTML-Auszeichnung waren Tabellen fort­an nur noch für die Auszeichnung von Inhalten gedacht, die auch tat­säch­lich tabel­la­risch dar­ge­stellt wer­den sol­len.

Die ein­fa­che Einteilung eines Weblayouts in Zeilen und Spalten war mit CSS nicht mehr mög­lich. Mit CSS-Grids kommt die Layouterstellung als Raster zurück – sogar ganz ähn­lich, wie es einst mit Tabellen in den Zeiten vor CSS üblich war.

css-grids

Raster vorbereiten

Zunächst ein­mal muss fest­ge­legt wer­den, für wel­chen Bereich eines HTML-Dokumentes CSS-Grids ange­wen­det wer­den sol­len. Will man das gesam­te Dokument per CSS-Grids in Raster ein­tei­len und gestal­ten, soll­te das „<body>“-Element als Ausgang genom­men wer­den. Mit der „display“-Eigenschaft wer­den das Element sowie des­sen Kindelemente für die Verwendung von Grids aus­ge­zeich­net.

body {
  display: grid;
}

Im nächs­ten Schritt wird ein Raster defi­niert. Per „grid-tem­pla­te-rows“ und „grid-tem­pla­te-columns“ gibt man für jede anzu­le­gen­de Reihe bezie­hungs­wei­se Spalte einen Wert ein. Hierbei kann es sich um abso­lu­te oder rela­ti­ve Angaben oder das Schlüsselwort „auto“ han­deln. Reihen oder Spalten mit dem Wert „auto“ neh­men eine Größe ein, die dafür sorgt, dass das Raster immer den gesam­ten zur Verfügung ste­hen­den Raum ein­nimmt.

body {
  grid-template-columns: 300px auto;
  grid-template-rows: 200px auto 200px;
}

Spalten und Zeilen definieren

Ist das Raster defi­niert, kön­nen die dar­in ent­hal­te­nen Kindelemente inner­halb des Rasters ver­teilt wer­den. Dazu wird eine soge­nann­te Grid-Area defi­niert, inner­halb derer ein Element dar­ge­stellt wird. Dieser Bereich benö­tigt die Angabe einer Start- und Endposition für die Spalte und Zeile.

Die vier Angaben wer­den über die Eigenschaften „grid-column-start“, „grid-column-end“, „grid-row-start“ und „grid-row-end“ fest­ge­legt. Jeder Eigenschaft wird also eine Zahl oder ein Name zuge­wie­sen, der vor­her defi­niert wur­de.

header {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
}

nav {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
}

article {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 2;
}

footer {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 3;
}

Auf die­se Weise las­sen sich Elemente frei inner­halb des Rasters ver­tei­len. Dabei kön­nen ein­zel­ne Elemente sich auch über­schnei­den. Die ein­zi­ge Einschränkung besteht dar­in, dass die Bereiche immer ein Rechteck dar­stel­len müs­sen. Andere Formen sind also nicht mög­lich.

Im Beispiel wird ein ein­fa­ches Standardlayout dar­ge­stellt, bei dem die Höhe der ers­ten und drit­ten Spalte fest, die der zwei­ten fle­xi­bel ist. Die Breite der ers­ten Spalte ist eben­falls fest und die der zwei­ten fle­xi­bel.

css-grids_fr
Raster, wel­ches die gesam­te Höhe des Browserfensters ein­nimmt

Mit „grid-column“ und „grid-row“ gibt es auch Kurzformen, bei denen die Anfangs- und Endposition in einer Eigenschaft jeweils zusam­men­ge­fasst wird. Getrennt wer­den die bei­den Werte jeweils von einem Schrägstrich.

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

Ausrichtung von Elementen

Die Gestaltungsmöglichkeiten sind an die­ser Stelle noch nicht am Ende. So gibt es auch neue Eigenschaften, mit denen Inhalte inner­halb einer Grid-Area unter­schied­lich aus­ge­rich­tet wer­den kön­nen.

Denn bis­lang waren Ausrichtungen per „text-align“ und „ver­ti­cal-align“ nur für Texte bezie­hungs­wei­se Tabellen mög­lich. Um gan­ze Elemente aus­zu­rich­ten, muss­te bis­lang eben­falls die „float“-Eigenschaft zweck­ent­frem­det wer­den oder auf eine abso­lu­te Platzierung gesetzt wer­den.

Mit „jus­ti­fy-self“ und „align-self“ gibt es zwei neue Ausrichtungseigenschaften. Erlaubt sind „start“, „end“, „cen­ter“ und der Standardwert „stretch“. Auch hier wer­den die Inhalte ent­spre­chend aus­ge­rich­tet.

Während “jus­ti­fy-self” ein Element auf der Horizontalen aus­rich­tet – zum Beispiel links oder rechts –, ermög­licht “align-self” eine Ausrichtung auf der Vertikalen – zum Beispiel oben oder unten.

Reihenfolge im Raster

Im Prinzip lässt sich das im Beispiel defi­nier­te Layout wei­test­ge­hend auch mit „klas­si­schen“ CSS-Eigenschaften wie „float“ rea­li­sie­ren. Der Vorteil beim Einsatz von CSS-Grids ist jedoch, dass die Reihenfolge der Auszeichnung der Elemente im Quelltext kei­ner­lei Rolle spielt. Denn jedes Element bekommt mit „grid-column“ und „grid-row“ einen fes­ten Platz inner­halb des Rasters zuge­wie­sen.

Das „<footer>”-Element könn­te also vor allen ande­ren Elementen im Quelltext aus­ge­zeich­net wer­den. Es wür­de den­noch in der letz­ten Zeile des Rasters dar­ge­stellt wer­den.

Gerade bei respon­si­ven Layouts ist es häu­fig sinn­voll, die Darstellungsreihenfolge ein­zel­ner Bereiche für die Mobilansicht umzu­stel­len. Per CSS-Grids ist es ein Leichtes, zum Beispiel die Navigation für die Mobilansicht am Seitenende dar­zu­stel­len.

Der Browsersupport erlaubt den Einsatz ganz ohne schlech­tes Gewissen. Alle moder­nen Browser mit wenigs­tens einer gerin­gen Marktbedeutung unter­stüt­zen CSS-Grids zuver­läs­sig.

(Artikelbild: Depositphotos)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

2 Kommentare

  1. Vielen Dank für den inter­es­san­ten und gut geschrie­be­nen Artikel.
    Das auch der Browsersupport nicht ver­ges­sen wur­de ist lobens­wert.
    Ich bin sehr ent­äuscht, was für ein Problemkind der Firefox-Browser gewor­den ist.
    Eigentlich mein Lieblings-Browser, aber im Netz sind immer mehr Seiten nicht mehr voll kom­pa­ti­ble mit Firefox.
    Nebenbei bemerkt, zu dem Thema die­ses Artikels gehört ja irgend­wie auch Gutenberg, der neue Editor von WordPress 5, bin gespannt, ob es einen Artikel dar­über auf Dr.Web gibt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.