Kategorien
Design HTML/CSS

HTML5: Moderne Layouts mit CSS-Grids

Als es noch kein CSS und keine Trennung zwischen Inhalt und Gestaltung einer Website gab, war es üblich, Weblayouts als Tabelle zu gestalten. Mit der steigenden Bedeutung einer semantischen HTML-Auszeichnung waren Tabellen fortan nur noch für die Auszeichnung von Inhalten gedacht, die auch tatsächlich tabellarisch dargestellt werden sollen.

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

css-grids

Raster vorbereiten

Zunächst einmal muss festgelegt werden, für welchen Bereich eines HTML-Dokumentes CSS-Grids angewendet werden sollen. Will man das gesamte Dokument per CSS-Grids in Raster einteilen und gestalten, sollte das „<body>“-Element als Ausgang genommen werden. Mit der „display“-Eigenschaft werden das Element sowie dessen Kindelemente für die Verwendung von Grids ausgezeichnet.

body {
  display: grid;
}

Im nächsten Schritt wird ein Raster definiert. Per „grid-template-rows“ und „grid-template-columns“ gibt man für jede anzulegende Reihe beziehungsweise Spalte einen Wert ein. Hierbei kann es sich um absolute oder relative Angaben oder das Schlüsselwort „auto“ handeln. Reihen oder Spalten mit dem Wert „auto“ nehmen eine Größe ein, die dafür sorgt, dass das Raster immer den gesamten zur Verfügung stehenden Raum einnimmt.

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

Spalten und Zeilen definieren

Ist das Raster definiert, können die darin enthaltenen Kindelemente innerhalb des Rasters verteilt werden. Dazu wird eine sogenannte Grid-Area definiert, innerhalb derer ein Element dargestellt wird. Dieser Bereich benötigt die Angabe einer Start- und Endposition für die Spalte und Zeile.

Die vier Angaben werden über die Eigenschaften „grid-column-start“, „grid-column-end“, „grid-row-start“ und „grid-row-end“ festgelegt. Jeder Eigenschaft wird also eine Zahl oder ein Name zugewiesen, der vorher definiert wurde.

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 diese Weise lassen sich Elemente frei innerhalb des Rasters verteilen. Dabei können einzelne Elemente sich auch überschneiden. Die einzige Einschränkung besteht darin, dass die Bereiche immer ein Rechteck darstellen müssen. Andere Formen sind also nicht möglich.

Im Beispiel wird ein einfaches Standardlayout dargestellt, bei dem die Höhe der ersten und dritten Spalte fest, die der zweiten flexibel ist. Die Breite der ersten Spalte ist ebenfalls fest und die der zweiten flexibel.

css-grids_fr
Raster, welches die gesamte Höhe des Browserfensters einnimmt

Mit „grid-column“ und „grid-row“ gibt es auch Kurzformen, bei denen die Anfangs- und Endposition in einer Eigenschaft jeweils zusammengefasst wird. Getrennt werden die beiden Werte jeweils von einem Schrägstrich.

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

Ausrichtung von Elementen

Die Gestaltungsmöglichkeiten sind an dieser Stelle noch nicht am Ende. So gibt es auch neue Eigenschaften, mit denen Inhalte innerhalb einer Grid-Area unterschiedlich ausgerichtet werden können.

Denn bislang waren Ausrichtungen per „text-align“ und „vertical-align“ nur für Texte beziehungsweise Tabellen möglich. Um ganze Elemente auszurichten, musste bislang ebenfalls die „float“-Eigenschaft zweckentfremdet werden oder auf eine absolute Platzierung gesetzt werden.

Mit „justify-self“ und „align-self“ gibt es zwei neue Ausrichtungseigenschaften. Erlaubt sind „start“, „end“, „center“ und der Standardwert „stretch“. Auch hier werden die Inhalte entsprechend ausgerichtet.

Während “justify-self” ein Element auf der Horizontalen ausrichtet – zum Beispiel links oder rechts –, ermöglicht “align-self” eine Ausrichtung auf der Vertikalen – zum Beispiel oben oder unten.

Reihenfolge im Raster

Im Prinzip lässt sich das im Beispiel definierte Layout weitestgehend auch mit „klassischen“ CSS-Eigenschaften wie „float“ realisieren. Der Vorteil beim Einsatz von CSS-Grids ist jedoch, dass die Reihenfolge der Auszeichnung der Elemente im Quelltext keinerlei Rolle spielt. Denn jedes Element bekommt mit „grid-column“ und „grid-row“ einen festen Platz innerhalb des Rasters zugewiesen.

Das „<footer>“-Element könnte also vor allen anderen Elementen im Quelltext ausgezeichnet werden. Es würde dennoch in der letzten Zeile des Rasters dargestellt werden.

Gerade bei responsiven Layouts ist es häufig sinnvoll, die Darstellungsreihenfolge einzelner Bereiche für die Mobilansicht umzustellen. Per CSS-Grids ist es ein Leichtes, zum Beispiel die Navigation für die Mobilansicht am Seitenende darzustellen.

Der Browsersupport erlaubt den Einsatz ganz ohne schlechtes Gewissen. Alle modernen Browser mit wenigstens einer geringen Marktbedeutung unterstützen CSS-Grids zuverlässig.

(Artikelbild: Depositphotos)

Von 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 Antworten auf „HTML5: Moderne Layouts mit CSS-Grids“

Vielen Dank für den interessanten und gut geschriebenen Artikel.
Das auch der Browsersupport nicht vergessen wurde ist lobenswert.
Ich bin sehr entäuscht, was für ein Problemkind der Firefox-Browser geworden ist.
Eigentlich mein Lieblings-Browser, aber im Netz sind immer mehr Seiten nicht mehr voll kompatible mit Firefox.
Nebenbei bemerkt, zu dem Thema dieses Artikels gehört ja irgendwie 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.