Raster definieren kann ganz einfach sein

CSS Grid: Komfortabel Weblayouts erstellen
Keine Kommentare

Das Grid-Layout aus CSS3 kommt einer Revolution bei der Erstellung CSS-basierter Layouts gleich. Früher musste man tricksen, um Layouts zu gestalten – jetzt geht es endlich intuitiv. Gleichzeitig ist das Grid-Layout äußerst mächtig. Und das Gute: Grid-Layout wird in den aktuellen Versionen aller großen Browser unterstützt.

Auch im Jahr 2018 werden die meisten Weblayouts noch immer mit Techniken umgesetzt, die ursprünglich gar nicht für Layouts gedacht waren und auch nur bedingt dafür geeignet sind. Dazu gehören zum Beispiel float, display: inline-block, display: table-cell und Co. Einzelne Komponenten von CSS3 wie abgerundete Ecken, Schatten, Farbverläufe oder Transitions haben es längst in Weblayouts und in unseren Workflow geschafft, aber layouttechnisch sind wir in den letzten zehn Jahren nicht viel weiter gekommen. Glücklicherweise ändert sich das – zum einen durch Flexbox, das immer weiter adaptiert wird, und jetzt neuerdings durch CSS Grid (offiziell: „CSS Grid Layout Module Level 1“).

Im folgenden Artikel sehen Sie anhand eines Beispiels zunächst, wie CSS Grid funktioniert, danach geht es um die Unterschiede zu Flexbox. Am Ende dieses Artikels widmen wir uns dem Thema Browserunterstützung und Fallbacklösungen.

Wunschlos glücklich mit CSS Grid

CSS Grid ist eine Spezifikation des W3C zur Erstellung von Layouts. Seit Mai 2017 ist CSS Grid eine „Candidate Recommendation“, d. h. nur eine Stufe von der endgültigen Verabschiedung entfernt. CSS Grid ermöglicht genau das, was der Name verheißt: die Erstellung und Definition von Rastern für Webseiten. Sie können sowohl einfache zwei- oder dreispaltige Raster definieren als auch ausgefeilte 16-spaltige Raster. Das Aussehen und die Anzahl der Zeilen lässt sich ebenfalls festlegen; allerdings können Sie auch auf das implizite Raster setzen, wodurch die benötigten Zeilen automatisch erstellt werden. Außerdem lassen sich Abstände zwischen den Rasterzellen definieren und die HTML-Elemente beliebig auf dem Raster verteilen. Einzelne Elemente können sich dabei über mehrere Spalten oder Zeilen erstrecken; Rasterzellen können aber auch frei bleiben, was ganz neue Layouttypen ermöglicht.

Tools every PHP Developer needs to know

mit Sebastian Bergmann (thePHP.cc)

Learning Machine Learning

mit Joel Lord (Auth0)

Auch in puncto Ausrichtung bietet CSS Grid alles, was das Herz begehrt: Mit einer Handvoll Eigenschaften können Sie Ihre Elemente beliebig vertikal und horizontal ausrichten. Die Ausmaße des Rasters können Sie sehr flexibel bestimmen, d. h. beispielsweise Spalten in fester Breite mit flexiblen Spalten kombinieren, die den übrigen Platz optimal unter sich aufteilen. Zudem sind mit der Funktion minmax() auch Ausmaßdefinitionen möglich wie „mindestens 200 px, aber höchstens 50 %“. CSS Grid bietet Ihnen viele Optionen zur Rasterdefinition, die gleichzeitig so flexibel sind, wie es für heutige Webseiten benötigt wird. Dabei können Sie auch auf sehr intuitive Techniken zurückgreifen. Und selbstverständlich lassen sich für unterschiedliche Viewports verschiedene Raster definieren.

Am Anfang ist das Raster

Anhand eines Beispiels lässt sich die prinzipielle Funktionsweise von CSS Grid am besten verdeutlichen. Es soll ein Raster mit drei Spalten und zwei Zeilen erstellt werden. Basis ist der folgende HTML-Code:

<div class="raster"&lgt;
  <div class="raster">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>

Die Rasterdarstellung müssen wir beim Elternelement, d. h. dem umfassenden Element, aktivieren. Dazu dient display: grid. Genauso wie übrigens auch Flexbox wirkt Grid-Layout nur auf die direkten Kindelemente.

Dann geht es an die Erstellung des Rasters. Bei der Definition der Spalten hilft uns die Eigenschaft grid-template-columns:

grid-template-columns: 200px 250px 150px;

Diese Angabe definiert – aufgrund der drei Zahlen, die als Wert angegeben sind – drei Spalten. Gleichzeitig wird auch die Breite der Spalten festgelegt: Die erste ist 200 px breit, die zweite 250 px und die dritte 150 px. Auf dieselbe Art definieren wir zwei Zeilen:

grid-template-rows: 200px 200px;

Praktisch ist ebenfalls die Eigenschaft grid-gap, wenn wir einen Zwischenraum zwischen den Rasterzeilen und -spalten festlegen wollen. Damit sieht unsere Rasterdefinition folgendermaßen aus:

.raster {
  display: grid;
  grid-template-columns: 200px 250px 150px;
  grid-template-rows: 200px 200px;
  grid-gap: 20px;
}

Im Beispiel haben wir nur das Raster festgelegt, aber nicht bestimmt, an welcher Stelle die einzelnen Rasterelemente stehen sollen. In diesem Fall verteilen sich die Rasterelemente automatisch auf die einzelnen Rasterzellen in der Reihenfolge, in der sie im Quellcode stehen (Abb. 1).

Gut platziert …

Sie können auch für jedes Element einzeln die Position bestimmen. Dafür verwenden Sie grid-column-start, grid-column-end oder entsprechend grid-row-start und grid-row-end. Dahinter schreiben Sie eine Zahl – nämlich die Zahl der Rasterlinie, bei der das Element beginnen oder enden soll. Rasterlinien sind ein zentrales Konzept bei Grid-Layout. Eben haben wir davon gesprochen, dass wir über grid-template-columns Spalten definiert haben. Durch die Definition

grid-template-columns: 200px 250px 150px;

werden aber gleichzeitig Linien definiert. Die erste vertikale Rasterlinie wird automatisch an Position 0 festgelegt. Die zweite vertikale Linie beginnt 200 px weiter rechts, dann folgt die dritte Linie 250 px von der zweiten entfernt und schließlich die vierte, die 150 px nach der dritten beginnt.

Sehen wir uns das am Beispiel an – Ziel ist die in Abbildung 2 gezeigte Anordnung. Dafür muss das Element .a ganz links beginnen und sich über zwei Zellen erstrecken. Das bedeutet, dass .a bei der ersten vertikalen Rasterzeile beginnen muss und bis zur dritten vertikalen Rasterzeile reicht:

.a {
  grid-column-start: 1;
  grid-column-end: 3;
}

Außerdem soll .a bei der ersten horizontalen Rasterlinie anfangen. Standardmäßig erstrecken sich Elemente nur bis zur nächsten Rasterlinie, deswegen brauchen wir in diesem Fall grid-row-end nicht. Damit ist die Definition für .a vollständig:

.a {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
}

So wie sich .a über mehrere Spalten erstreckt, kann sich ein Element auch über mehrere Zeilen erstrecken. .b soll neben .a angeordnet werden und sich über zwei Zeilen erstrecken. Das erreichen wir über die folgende Definition:

.b {
  grid-column-start: 3;
  grid-row-start: 1;
  grid-row-end: 3;  
}

Auf dieselbe Art lässt sich die Position aller Elemente frei definieren. Es ist aber auch möglich, einzelne Zellen freizulassen. Sie haben die volle Freiheit, an welcher Stelle Sie Elemente platzieren wollen – nur L-förmige Anordnungen sind noch nicht vorgesehen.

Abb. 2: Elemente können sich über mehrere Zeilen/Spalten erstrecken

Schon bei diesem Beispiel zeigt sich deutlich ein Unterschied zum CSS3-Layoutmodul Flexbox: Flexbox ist im Wesentlichen ein Mittel für eindimensionale Anordnungen. Sie können Elemente genau definiert untereinander oder nebeneinander anordnen und die Ausrichtung exakt bestimmen. Aber ein Layout, bei dem sich ein Element über zwei Spalten und ein anderes über zwei Zeilen erstreckt, wäre nicht möglich. Zudem gibt es keine Möglichkeit, einzelne Stellen frei zu lassen, sofern man nicht tricksen will.

Variationen

Es gibt mehrere Möglichkeiten zur Verteilung der Elemente auf das Raster. Die Definition für .a ließe sich auch wie folgt schreiben:

.a {
  grid-column: 1 / 3;
  grid-row: 1;
}

Bei grid-column geben Sie zuerst die Anfangslinie und nach einem Slash die Endlinie an. Praktisch ist manchmal der Einsatz von span, wodurch Sie vorgeben, über wie viele Zellen sich ein Element erstreckt. Dasselbe erreichen Sie auch mit folgender Definition:

.a {
  grid-column: 1 / span 2;
  grid-row: 1;
}

Ebenso gibt es die Option, alle Angaben hinter grid-area zu notieren. Etwas gewöhnungsbedürftig ist dabei die Reihenfolge: grid-row-start/grid-colum-start/grid-row-end/grid-column-end. Damit ließe sich .a auch durch den folgenden Code platzieren:

.a {
  grid-area: 1 / 1 / 2 / 3;
}

Ein weiterer Vorteil von CSS Grid sind die Anordnungsmöglichkeiten. Sie können die Rasterelemente insgesamt anordnen (align-content oder justify-content) oder die Inhalte innerhalb eines Rasterbereichs verteilen (align-items oder justify-items). Außerdem lassen sich die globalen Anordnungen für einzelne Elemente mit align-self oder justify-self überschreiben. Die Anordnungen für Grid wie auch für Flexbox sind im Box Alignment Module spezifiziert.

Responsives Layout mit Grid

Gerade bei responsiven Webseiten zeigt CSS Grid seine Stärken. Sie können sehr einfach und intuitiv neue Aufteilungen für verschiedene Viewports definieren. Sehen wir uns ein Beispiel an und gehen dabei von folgender HTML-Struktur aus:

<header><h2>header</h2></header>
<article><h2>article</h2> </article>
<nav><h2>nav</h2></nav>
<section><h2>section</h2></section>
<aside><h2>aside</h2></aside>
<footer><h2>footer</h2></footer> 

Beginnen wir mit der Definition des Rasters für große Screens, für die eine dreispaltige Darstellung vorgesehen ist. header und footer sollen sich über die gesamte Breite erstrecken. Unterhalb des Headers befindet sich links die Navigation (nav) mit dem Bereich (section), in der Mitte ist article und rechts aside (Abb. 3). Für das dreispaltige Raster schreiben wir für das body-Element:

display: grid;
grid-template-columns: 6em 1fr 6em;

Bei der Breite der mittleren Spalte ist 1fr angegeben. fr steht für „fraction“, d. h. Teil, oder auch „free space“. Die linke und die rechte Spalte werden auf eine Breite von 6em gesetzt, die mittlere soll den restlichen verfügbaren Teil einnehmen – und genau das bewirkt 1fr. Für die Zeilen geben wir nichts an – damit werden automatisch so viele Zeilen erzeugt wie notwendig sind. Die Höhe der Zeilen orientiert sich praktischerweise an der Höhe der Elemente.

Abb. 3: Das dreispaltige Layout für größere Bildschirme

Bei der Platzierung der Elemente auf dem Raster könnten wir so wie beim ersten Beispiel mit grid-column-start/grid-column-end bei den Kindelementen arbeiten. Allerdings ist das Hantieren mit den Zeilennummern nicht sehr intuitiv. Zudem wird es mühsam, wenn die Definitionen bei jeder Viewport-Größe neu vorgenommen werden müssen. Schöner und gleichzeitig flexibler für die Definition der weiteren Layouts bei anderen Viewport-Größen ist die Beschreibung des Rasters mit grid-template-areas. Für das gewünschte Layout verwenden wir die folgenden Angaben:

grid-template-areas: 
  "header header header" 
  "nav     article aside" 
  "section article aside" 
  "footer footer footer";

Die Bezeichnungen sind dabei frei wählbar. Jede Zeichenkette definiert eine Zeile; wir haben im Beispiel vier Zeilen. Die einzelnen Wörter innerhalb einer Zeichenkette stehen für die einzelnen Rasterzellen. Das heißt, wir haben damit ein dreispaltiges und vierzeiliges Raster definiert. Die hier eingesetzten Begriffe können wir nun verwenden, um die Elemente auf die bei grid-template-areas definierten Bereiche zu verteilen (Listing 1).

article {
  grid-area: article;
}
nav {
  grid-area: nav;
}
section {
  grid-area: section;
}
aside {
  grid-area: aside;
}
header {
  grid-area: header;
}
footer {
  grid-area: footer;
}

Diese Art der Rastererstellung ist intuitiv einsichtig. Ihr größter Vorteil zeigt sich aber, wenn wir das Raster innerhalb von Media Queries für die verschiedenen Viewports umdefinieren.

Zweispaltig bei weniger Platz

Bei einer maximalen Viewport-Breite von 50 em soll unser Layout zweispaltig dargestellt werden (Abb. 4). Es genügt zu diesem Zweck, die Eigenschaften grid-template-areas und grid-template-columns neu festzulegen. Mehr ist nicht notwendig, da die Zuweisung der einzelnen HTML-Elemente zu den Rasterbereichen gleich bleibt. Das zweispaltige Raster definieren wir folgendermaßen:

@media all and (max-width: 50em) {
  body {
    grid-template-areas: 
      "header header" 
      "nav nav" 
      "aside article" 
      "section article"
      "footer footer";
    grid-template-columns: 1fr 4fr;
  }
}

Bei einem noch kleineren Viewport sollen die Elemente direkt untereinander dargestellt werden (Abb. 5). Wir könnten hier ein einspaltiges Raster mit grid-template-areas und grid-template-columns bestimmen. Eine andere Möglichkeit besteht darin, statt der Rasterdarstellung beim umfassenden Element (display: grid) mit display: block die normale Blockdarstellung zu aktivieren. Nun stehen die Elemente untereinander, und zwar in der im Quellcode angegebenen Reihenfolge:

@media all and (max-width: 30em) {
  body {    
    display: block;
  }
}

Den vollständigen Code zeigt Listing 2.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
/* Farbangaben und ähnliche rein optische Formatierungen weggelassen */
body {
  font: 120% sans-serif;
  display: grid;
  /* dreispaltige Darstellung */
  grid-template-areas: 
    "header header header" 
    "nav article aside" 
    "section article aside" 
    "footer footer footer";
  grid-template-columns: 6em 1fr 6em;
}
article {
  grid-area: article;
}
nav {
  grid-area: nav;
}
section {
  grid-area: section;
}
aside {
  grid-area: aside;
}
header {
  grid-area: header;
}
footer {
  grid-area: footer;
}
/* zweispaltige Darstellung */
@media all and (max-width: 50em) {
  body {
    grid-template-areas: 
      "header header" 
      "nav nav" 
      "aside article" 
      "section article" 
      "footer footer";
    grid-template-columns: 1fr 4fr;
  }
}
/* einspaltige Darstellung */
@media all and (max-width: 30em) {
  body {
    display: block;
  }
}  </style>
</head>
<body>
<header><h2>header</h2></header>
<article><h2>article</h2>
  <p>Lorem ipsum dolor sit amet, 
    dolor sit amet.</article>
<nav><h2>nav</h2></nav>
<section><h2>section</h2></section>
<aside><h2>aside</h2></aside>
<footer><h2>footer</h2></footer>
</body>
</html>

Abb. 4: Zweispaltige Darstellung für mittlere Screens

 

Abb. 5: Einspaltiges Layout für kleine Screens

Das Faszinierende und Besondere an der Neudefinition des Rasters für unterschiedliche Viewport-Größen ist, dass es keinerlei technische Beschränkungen gibt, welche Elemente an welcher Stelle dargestellt werden und wie die Aufteilung sich jeweils ändern soll – Sie haben völlig freie Hand! Allerdings kann die vollständige Neuordnung der Elemente in Bezug auf die Zugänglichkeit der Webseite problematisch sein. Das heißt: die HTML-Quellcodeanordnung sollte die logisch sinnvolle Reihenfolge der Elemente sein. Mögliche Umordnungen sollten sparsam und nur wo notwendig vorgenommen werden. Mit dem Plus an Layoutoptionen ist eben auch eine größere Verantwortung verbunden, diese sinnvoll und im Sinne aller Nutzer einzusetzen.

CSS Grid vs. Flexbox

Wer von CSS3-Layouts spricht, meint heute zumeist auch Flexbox. Worin genau besteht der Unterschied zwischen Flexbox und CSS Grid? Was ermöglicht CSS Grid, was mit Flexbox nicht machbar ist?

Der wesentliche Unterschied zwischen CSS Grid und Flexbox ist, wie schon erwähnt, dass Flexbox für eindimensionale Anordnungen geeignet ist, CSS Grid hingegen für mehrdimensionale. Das sieht man deutlich am letzten Beispiel: In dieser Form hätte man es nicht mit Flexbox umsetzen können. Wir hätten zwar jedes einzelne Layout mit Verschachtelungen mit Flexbox realisieren können; es gibt aber keine Möglichkeit, aus ein und demselben Quellcode diese verschiedenen Anordnungen umzusetzen.

Ein weiterer Unterschied zwischen CSS Grid und Flexbox ist der Umgang mit Leerraum. Bei dem Raster, das Sie definieren, können Sie auch einzelne Bereiche frei lassen. Im klassischen CSS müssen Sie für Leerraum auf das sperrige margin zurückgreifen oder mit leeren Elementen tricksen. Außerdem ist die Herangehensweise bei der Anordnung mit Flexbox eine andere als bei der Anordnung mit Grid-Layout. Bei Grid-Layout gehen Sie vom Raster aus, es bildet die Basis für die Anordnungen. Bei Flexbox hingegen gehen Sie von den Elementen aus, die sich dann magisch anordnen. Rachel Andrew spricht hier von „working from grid definition in“ (Grid) im Unterschied zu „working from content out“ (Flexbox).

Flexbox hat seine Stärken, wenn Sie beispielsweise schnell Elemente nebeneinander oder untereinander anordnen wollen. Für ein Navigationsmenü ist deswegen Flexbox das Mittel der Wahl – für komplexere Aufteilungen und Layouts hingegen CSS Grid.

Selbstverständlich lassen sich die beiden Techniken kombinieren: Sie können das umfassende Layout mit CSS Grid realisieren und für die Anordnung einzelner Komponenten, etwa der Navigation oder der Produktpräsentationen, auf Flexbox zurückgreifen. Ein Grid Item kann problemlos gleichzeitig Flexbox-Container sein – im Beispiel könnten wir die Navigation mit Flexbox gestalten:

nav {
  display: flex;
}	

Grid-Layout und die Browser

Bei allen CSS-Neuerungen stellt sich immer wieder die bange Frage nach der Browserunterstützung. Diese sieht bei CSS Grid recht gut aus. Bei der Einführung von CSS Grid sind die Browserhersteller anders vorgegangen als beispielsweise bei Flexbox. Bei Flexbox begannen Browser früh, einzelne Versionen der Spezifikation mit den jeweiligen Präfixen zu unterstützen, also beispielsweise über display: -webkit-box. Deswegen mussten Sie (und müssen es teilweise noch immer) die Angaben mehrfach schreiben, um den Flexbox-Code für möglichst viele Browser erstellen zu lassen. Außerdem gab es viele Bugs, die die Verwendung von Flexbox erschwerten.

Bei CSS Grid sind die Browserhersteller einen anderen Weg gegangen. Die Implementation von CSS Grid fand nicht mit einem browserspezifischen Präfix wie -moz-, -webkit- etc. statt, sondern hinter einem Flag. Um die Grid-Implementierung z. B. in Chrome freizuschalten, musste man in die Adresszeile chrome://flags eingeben und dann „experimental Web Platform Features“ aktivieren. Auf diese Weise konnten Entwickler die neue CSS-Technik testen, aber gleichzeitig war klar, dass sie nicht für den produktiven Einsatz geeignet war. Die Browserhersteller konnten so in Ruhe an der Implementierung feilen, ohne befürchten zu müssen, dass durch eine Änderung Webseiten nicht mehr funktionieren.

Seit März 2017 ist CSS Grid in den großen Browsern aktiviert. Seit Firefox 52 funktioniert CSS Grid standardmäßig. Chrome unterstützt Grid defaultmäßig seit Version 57 und in Opera funktioniert es seit Version 44. Außerdem ist CSS Grid im Safari 10.1 implementiert sowie in iOS-Safari. Die neue Version von CSS Grid wird in Edge gerade implementiert, in den Windows Insider Preview Builds lässt es sich immerhin schon aktivieren. Hier ist also ebenfalls bald mit einer Unterstützung zu rechnen. Etwas komplexer ist die Situation im Internet Explorer und in den bisherigen Edge-Versionen. Der Internet Explorer unterstützt seit Version 10 eine Vorversion der Grid-Spezifikation. Hier müssen Sie auf das Präfix –ms- zurückgreifen. Außerdem ist die Herangehensweise teilweise eine andere, d. h. es gibt keine exakte Entsprechung der neuen Standardeigenschaften zu IE-Grid-Eigenschaften. Zudem funktionieren nicht alle Grid-Features. Nicht implementiert sind etwa die folgenden CSS-Grid-Eigenschaften:

  • Die Abstände zwischen den Rasterzellen über grid-gap
  • Die Eigenschaft grid-template-areas
  • Die automatischen Aufteilungen. Das heißt, Sie müssen für die Grid-Darstellung im Internet Explorer beispielsweise immer Rasterspalten und -zeilen definieren. Außerdem müssen Sie die Elemente explizit an den benötigten Stellen platzieren.

Layouts für alle

In manchen besonderen Situationen wie bei der Web-App-Entwicklung oder im Intranet können Sie davon ausgehen, es nur mit Grid-fähigen Browsern zu tun zu haben. Bei anderen allgemeinen Webprojekten kann die Anzahl der Noch-nicht-Grid-Browser jedoch so groß sein, dass man sich um sie kümmern muss.

Beginnen wir mit Internet Explorer 10+ sowie Edge. Einfache Layouts können Sie so gestalten, dass sie auch im Internet Explorer funktionieren. Leider gibt es – da die Situation eben nicht so einfach ist – kein Tool, das Ihnen automatisch den Code für den Internet Explorer aus einem komplexen Standardraster erzeugt. Für die anderen Browser, die keine Variante von CSS Grid unterstützen, können Sie auf Progressive Enhancement setzen. Sie erstellen ein Layout mit den klassischen Methoden und ergänzen es dann um Grid-Techniken für die fortgeschrittenen Browser. Hilfreich ist dabei, dass viele CSS-Layouteigenschaften keine Auswirkung haben, wenn sie auf Grid-Container oder -Items angewendet werden.

Sehen wir uns das an einem kleinen Beispiel an. Wir wollen ein Bild und einen Text gestalten. Der Text soll sich links vom Bild befinden (Abb. 6). Verwendet wird der folgende HTML-Code:

<div class="container">
  <img src="bild.jpg" alt="Bild" class="bild">
  <div class="text">Text</div>
</div>

Abb. 6: Beispiel für eine Fallback-Lösung

Für Grid-Browser definieren wir das Raster: Mit der Breitenangabe auto wird der Bereich mit dem Bild so breit, wie das Bild es verlangt. Die zweite Spalte nimmt dank der Angabe 1fr den gesamten übrigen Platz ein:

.container {
  display: grid;
  grid-template-columns: auto 1fr;
}

Dann können wir noch den Text beispielsweise mittig anordnen – hier sehen Sie align-self im Einsatz:

.text {
  align-self: center;
}

Es fehlt noch die Fallback-Lösung für ältere Browser. Für diese können wir eine Darstellung der Elemente nebeneinander mit float umsetzen:

.bild  {
  float: left;
}

Nun müssen wir nur noch bei der float-Variante dafür sorgen, dass das umfassende .container-Element das gefloatete Element umschließt. Dafür können wir eine Clearfix-Lösung nutzen:

.container::after {
  content: " ";
  display: table;
  clear: both;
}

Im Beispiel müssen wir float: left nicht vor den Grid-Browsern verbergen, weil float keine Auswirkung auf Grid-Items hat.

Nicht immer ist die Situation allerdings so einfach. Manchmal kann es notwendig sein, bestimmte Angaben für Grid-Browser zu überschreiben. Am einfachsten gelingt das über eine @supports-Abfrage. In Klammern bei @supports schreiben Sie die CSS-Eigenschaften, auf deren Unterstützung Sie testen wollen:

@supports (display: grid) {
  /* Angaben nur bei Gridunterstützung */
}

Nur Browser, die CSS Grid unterstützen, interpretieren dann die Angaben innerhalb der geschweiften Klammern. Rachel Andrew bietet neben vielen anderen äußerst nützlichen Tutorials auch eine Aufstellung darüber, welche klassischen CSS-Eigenschaften sich in welcher Form mit Grid-Angaben kombinieren lassen.

Fazit

Warum soll man heute schon Grid einsetzen, wenn man sich dann noch mit klassischem CSS für die nicht unterstützenden Browser abplagen muss? Dafür gibt es mehrere Gründe: Zum einen gibt es Fälle, in denen Sie nur mit aktuellen Browsern zu tun haben – und da bietet Grid eine enorme Erleichterung und ausgefeilte Layouts. Zum anderen wird die Nutzerzahl von Nicht-Grid-Browsern ständig abnehmen, und da ist es gut, sich heute schon mit dem zu beschäftigen, was in den nächsten Jahren die Standardlayouttechnik werden wird.

CSS-Grid – das Wichtigste in Kürze
CSS Grid ist ein neues Layoutmodul aus CSS3. Es erlaubt die Definition eines Rasters per CSS, auf dem dann die im HTML-Quellcode stehenden Elemente verteilt werden. Die Elemente lassen sich ganz unabhängig vom Quellcode platzieren und können auch über mehrere Spalten/Zeilen reichen. Zudem gibt es mächtige Autoplacement-Algorithmen, die für flexible Anordnungen bei einer unbekannten Anzahl an Elementen sorgen. Vorgesehen sind außerdem Möglichkeiten der Anordnung – sowohl der ganzen Rasterelemente als auch innerhalb von diesen.
Auch Flexbox ist ein neues Layoutmodul aus CSS3. Es ist aber im Gegensatz zu CSS Grid für eindimensionale Layouts gedacht, d. h. wenn die Steuerung entweder in Zeilen oder in Spalten erfolgt. Dagegen lassen sich bei Grid Spalten und Zeilen beliebig definieren.CSS Grid funktioniert seit März 2017 in allen modernen Browsern standardmäßig (Chrome, Opera, Firefox, Safari). In Edge ist es in der Entwicklung. Ältere Edge-Versionen und Internet Explorer ab Version 10 unterstützen eine Vorversion der Spezifikation.

PHP Magazin

Entwickler MagazinDieser Artikel ist im PHP Magazin erschienen. Das PHP Magazin deckt ein breites Spektrum an Themen ab, die für die erfolgreiche Webentwicklung unerlässlich sind.

Natürlich können Sie das PHP Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -