HTML5: zeitgemäße Rasterlayouts mit CSS-Grids

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

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 den neuen 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;
  display: -ms-grid;
}

Da CSS-Grids derzeit nur im Internet Explorer funktionieren, ist es notwendig, mit entsprechenden Vendor-Präfixen zu arbeiten. Neben dem Standardwert „grid“ wird hier auch der Wert „-ms-grid“ verwendet. Fortan lassen sich alle Kindelemente per CSS-Grids anordnen.

Bevor jedoch die einzelnen Spalten und Zeilen definiert werden, sollte im „<body>“-Element noch angegeben werden, wie breit die Spalten und wie hoch die Zeilen sein sollen. Hierfür gibt es die Eigenschaften „grid-columns“ und „grid-rows“. Für jede Spalte beziehungsweise Zeile wird – per Leerzeichen getrennt – ein Wert angegeben. Neben absoluter und relativer Werte ist auch das Keyword „auto“ möglich.

body {
  width: 100%;
  display: grid;
  display: -ms-grid;
  grid-columns: 25% 75%;
  -ms-grid-columns: 25% 75%;
  grid-rows: auto auto auto;
  -ms-grid-rows: auto auto auto;
}

Im Beispiel wird ein Layout mit zwei Spalten und drei Zeilen definiert. Die erste Spalte ist 25 Prozent breit, die zweite Spalte ist 75 Prozent breit. Die Höhe der drei Zeilen erhält hier den Wert „auto“. Das heißt, die Höhe wird dem jeweiligen Inhalt angepasst. Alternativ hat man natürlich auch die Möglichkeit, die Höhe und Breite dem jeweiligen Kindelement selbst zuzuordnen – über die „width“- und „height“-Eigenschaften.

css-grids_auto
Einfaches Raster, bei dem sich die Höhe am Inhalt orientiert

Ein Klassiker im Tabellenlayout war immer, die Fußzeile so zu platzieren, dass sie immer am unteren Rand des Browserfensters positioniert war. Dies ist zusammen mit „calc()“ möglich.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht
body {
  width: 100%;
  height: 100%;
  display: grid;
  display: -ms-grid;
  grid-columns: 25% 75%;
  -ms-grid-columns: 25% 75%;
  grid-rows: 100px calc(100% - 200px) 100px;
  -ms-grid-rows: 100px calc(100% - 200px) 100px;
}

Im Beispiel wird die Höhe der mittleren Zeile berechnet, indem von der Seitenhöhe (100 Prozent) die Höhen der ersten und dritten Zeile abgezogen werden. Wichtig ist, dass sowohl das „<body>“-Element als auch das „<html>“-Element eine Höhe von 100 Prozent zugewiesen bekommen.

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

Eine Alternative zur Verwendung von  „calc()“ ist der Einsatz der neuen Einheit „fr“, was für „fraction unit“ steht. Die Einheit bezeichnet den noch zur Verfügung stehenden Platz.

body {
  …
  grid-rows: 100px 1fr 100px;
  -ms-grid-rows: 100px 1fr 100px;
}

Im Beispiel erhält die mittlere Zeile eine Höhe von „1fr“. Das heißt, die Zeile nimmt die gesamte noch zur Verfügung stehende Höhe ein. Während eine Angabe in Prozent immer in Relation zur Gesamtbreite beziehungsweise -höhe steht, berücksichtigt „fr“ absolute Angaben anderer Elemente innerhalb des Rasters.

Es gibt noch eine weitere Möglichkeit, die Breite und Höhe eines Rasterelementes zu definieren. Mit „minmax()“ wird ein Mindest- und Höchstwert für eine Breite beziehungsweise Höhe festgelegt.

body {
  …
  grid-rows: 100px minmax(100px, 1fr) 100px;
  -ms-grid-rows: 100px minmax(100px, 1fr) 100px;
}

Im Beispiel wird per „grid-rows“ die Höhe der mittleren Zeile so definiert, dass sie mindestens 100 Pixel Höhe und höchstens die restliche zur Verfügung stehende Höhe im Browserfenster einnimmt.

Spalten und Zeilen definieren

Im nächsten Schritt werden die Spalten und Zeilen festgelegt. Hierzu werden die Eigenschaften „grid-column“ und „grid-row“ verwendet. Sie geben die jeweilige Position des Elementes innerhalb des Rasters an. Wie bei klassischen Tabellen ist es auch mit CSS-Grids möglich, dass sich einzelne Zeilen über mehrere Spalten erstrecken.

header {
  grid-column: 1;
  -ms-grid-column: 1;
  grid-row: 1;
  -ms-grid-row: 1;
  grid-column-span: 2;
  -ms-grid-column-span: 2;
}

Im Beispiel wird der Kopfbereich ausgezeichnet. Er befindet sich in der ersten Spalte und ersten Zeile des Rasters und soll sich über die beiden Spalten des Rasters erstrecken. Dazu wird die Eigenschaft „grid-column-span“ auf die Anzahl der Spalten gesetzt, die das Element einnehmen soll.

nav {
  grid-column: 1;
  -ms-grid-column: 1;
  grid-row: 2;
  -ms-grid-row: 2;
}

article {
  grid-column: 2;
  -ms-grid-column: 2;
  grid-row: 2;
  -ms-grid-row: 2;
}

In der zweiten Zeile sollen Navigation („<nav>“) und Inhalt („<article>“) nebeneinander dargestellt werden. Innerhalb des Rasters werden die beiden Elemente daher in der ersten beziehungsweise zweiten Spalte der zweiten Zeile angeordnet. In der dritten und letzten Zeile soll die Fußzeile („<footer>“) über alle zwei Spalten hinweg platziert werden.

footer {
  grid-column: 1;
  -ms-grid-column: 1;
  grid-row: 3;
  -ms-grid-row: 3;
  grid-column-span: 2;
  -ms-grid-column-span: 2;
}

Da die Breite und Höhe der Rasterelemente bereits im „<body>“-Element definiert wurden, ist es nicht nötig, entsprechende Angaben zu machen.

Ausrichtung innerhalb eines Rasterelements

Mit den Eigenschaften „grid-column-align“ und „grid-row-align“ wird die Ausrichtung des Inhalts eines Rasterelementes auf horizontaler beziehungsweise vertikaler Ebene definiert. So kann der Inhalt jeweils oben, zentriert und unten beziehungsweise links, zentriert und rechts ausgerichtet werden.

header {
  …
  grid-column-align: center;
  -ms-grid-column-align: center;
  grid-row-align: end;
  -ms-grid-align: end;
}

Im Beispiel wird der Header zentriert und unten ausgerichtet. Während der Wert „center“ für eine zentrierte Ausrichtung steht, definiert „start“ eine Ausrichtung links beziehungsweise oben und „end“ steht für rechts beziehungsweise unten.

css-grids_align
Raster, bei dem die Elemente ausgerichtet sind und die Größe ihres Inhalts einnehmen

Zu beachten ist bei den beiden „…-align“-Eigenschaften, dass die Werte „start“, „center“ und „end“ dazu führen, dass die Größe des Elementes immer auf dessen Inhalt zugeschnitten wird, wenn per „width“ und „height“ keine Größe angegeben wurde. Der Standardwert für „grid-column-align“ und „grid-row-align“ ist jeweils „stretch“.

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.

Browsersupport und Alternative

Wie bereits erwähnt unterstützt derzeit nur der Internet Explorer, und zwar ab Version 10,  die CSS-Grids. Eine Alternative zum Grid-Modell ist das Flexbox-Modell, welches schon eine etwas größere Browserunterstützung genießt und hier auch schon mal vorgestellt wurde. Außerdem gibt es ein Polyfill, welches CSS-Grids für ältere Versionen des Internet Explorers sowie andere Browser nachbildet.

Die CSS-Grids sind noch in der Entwicklung, weshalb noch Änderungen und Erweizerungen am neuen Layoutmodell zu erwarten sind.

Links zum Beitrag

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.

Hinterlasse einen Kommentar

3 Kommentare auf "HTML5: zeitgemäße Rasterlayouts mit CSS-Grids"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
trackback

[…] Der „<div>“-Container wird genutzt, um darin das Spiel per HTML5-Canvas darstellen zu können. Dabei passt sich das Spiel automatisch der Breite und Höhe des Containers an. Auch relative Angaben sind möglich, um das Spiel beispielsweise der jeweiligen Größe des Displays anpassen zu können. Die Stylesheet-Datei ist für das eigentliche Spiel nicht nötig, da per Canvas die Gestaltung der Spielfläche übernommen wird. Allerdings werden der „Play“-Button sowie die Einblendung der Punkte per CSS gestaltet. […]

gery
Gast

danke sehr interessant

TheRiddler
Gast

Vielen Dank für den Überblick!

wpDiscuz