Im März veröffentlichte Mozilla Firefox 52, der Unterstützung für CSS Grid-Layout hinzufügte. CSS Grid ist ein zweidimensionales Layoutsystem für das Web, mit dem sich Layoutmuster nativ im Browser erstellen lassen. Das bedeutet, dass wir vertraute Raster mit nur ein paar Zeilen CSS leicht nachbilden können. Es bedeutet auch, dass wir eine ganze Menge mit CSS und Layouts machen können, was vorher nicht möglich war… aber dazu gleich mehr.
Ein kurzer Hinweis: Dieser Beitrag soll keine umfassende Einführung in CSS Grid sein und setzt eine grundlegende Vertrautheit mit CSS Grid voraus. Falls Sie das noch nicht getan haben, empfehle ich Ihnen die fantastische CSS Grid Layout Seite auf MDN.
Layouts im Web waren schon immer kompliziert. Als das Web zum ersten Mal eingeführt wurde, gab es keine Methode für Layouts. Dann kamen Tabellen (in Tabellen, in Tabellen, in Tabellen). Es war hakelig und seltsam, aber es funktionierte. Als CSS in den späten 90er Jahren eingeführt wurde, konnten Entwickler Divs und Floats für ihre Designs und Layouts verwenden. Dies führte schließlich zu Frameworks und Gittersystemen, mit deren Hilfe all die „Probleme“ wie das Löschen von Floats, negative Ränder, responsives Design und vieles mehr gelöst werden konnten. Und so geht es nun schon seit Jahren. Es gibt Tausende von Rastersystemen, aber sie sind alle mehr oder weniger gleich.
Nun, da CSS Grid Layout eine Realität ist, wollte ich sehen, was nötig wäre, um ein bestehendes Raster-Framework durch CSS Grid zu ersetzen. Für dieses Experiment habe ich mich für das beliebte Bootstrap-Framework entschieden.
Zunächst habe ich eine einfache Website mit dem Bootstrap-Raster erstellt:
Betrachten Sie diese auf CodePen.
So, jetzt wollen wir das Ganze mal aufschlüsseln und in CSS Grid umwandeln.
In Bootstrap umschließt die Klasse .container alles und legt die Breitenbeschränkungen fest. Sie fügt auch ein Padding für den linken und rechten Rand hinzu und zentriert alles. Hier gibt es nicht viel zu ändern. Genau wie bei Bootstrap kann die Containerklasse bei der Verwendung von CSS Grid nützlich sein. Ich habe sie wie folgt neu erstellt:
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}Wir können auch responsive Haltepunkte hinzufügen, indem wir Folgendes hinzufügen:
@media (min-width: 992px) { .container { width: 970px; }}Bootstrap verwendet die Klasse .row, um Spalten zu umbrechen und einen negativen Rand am linken und rechten Rand bereitzustellen, um die durch einzelne Spalten hinzugefügte Auffüllung zu negieren. Hacks wie negative Ränder werden mit CSS Grid nicht mehr benötigt, aber wenn Sie die Dokumentation gelesen haben, werden Sie wissen, dass CSS Grid einen Grid-Container benötigt. Die Klasse .row ist der perfekte Ort, um dies zu tun. Ich zeige Ihnen, was ich getan habe, und dann werden wir es aufschlüsseln.
.row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px;}display: grid erstellt den Grid-Container.
Die grid-template-columns Eigenschaft definiert die Spalten für das Grid. Sie können Leerzeichen verwenden, um jede Spalte einzeln zu definieren, aber hier verwenden wir die Wiederholungsschreibweise, um 12 gleich große Spalten zu definieren. 1fr bezieht sich auf die Breite der einzelnen Spalte. MDN definiert die Einheit fr als eine neue Einheit, die „einen Bruchteil des verfügbaren Platzes im Grid-Container darstellt“. Weitere Informationen über fr-Einheiten finden Sie auf MDN. Sie können auch mehr über die Eigenschaft grid-template-columns lesen.
Schließlich ist die Eigenschaft grid-gap eine Shorthand-Eigenschaft, die sowohl den Abstand zwischen den Spalten als auch zwischen den Spaltenzeilen definiert. Betrachten Sie sie als unseren Zwischenraum. Sie können hier mehr über grid-gap lesen.
Nun sind nur noch die Spaltenklassen übrig. Bootstrap verwendet Spaltenklassen wie .col-md-6 oder .col-lg-8, um die Anzahl der Spalten zu bestimmen, die ein Div überspannen soll. Außerdem wird das Div in der Schwebe gehalten und links und rechts ein Padding hinzugefügt, um Rinnen zwischen den Spalten zu schaffen. Die Wiederherstellung dieser Klassen ist dank der Shorthand-Eigenschaft .grid-column denkbar einfach. Wenn wir zum Beispiel die Klasse .col-md-6 nachbilden wollen, können wir folgendes verwenden:
@media (min-width: 992px) { .col-md-6 { grid-column: span 6; }}Einfach, oder? Keine Floats. Kein Auffüllen. Es funktioniert einfach. Das Kürzel grid-column gibt die Größe und Position eines Elements an. Wir können span verwenden, um anzugeben, dass sich dieser bestimmte Artikel über sechs Spalten erstrecken soll. Der Bundsteg wird automatisch durch die grid-gap-Eigenschaft des Wrappers abgedeckt. Mehr über die grid-column-Eigenschaft erfahren Sie hier.
Was passiert nun, wenn man alles zusammenfügt? Nun, die Website sieht genau gleich aus, aber wir sind in der Lage, die Bootstrap-Abhängigkeit vollständig zu entfernen und native CSS-Gitter zu verwenden.
Sehen Sie sich die aktualisierte Website auf CodePen an.
Diese Art von Experiment ist eine lustige Lernübung, aber sie kann auch gefährlich sein. Um eine Zeile des weisen Philosophen Jeff Goldblum zu zitieren:
„Du … warst so sehr damit beschäftigt, ob du es kannst oder nicht, dass du nicht darüber nachgedacht hast, ob du es solltest.“
Wir wollen CSS Grid nicht einschränken, indem wir es in eine Syntax zwängen, die sein Potenzial begrenzt. Wir waren in der Lage, das Bootstrap-Raster leicht nachzubilden, aber CSS Grid ist so viel leistungsfähiger als jedes andere Rastersystem, das es vorher gab. Das liegt daran, dass es sich um eine von Grund auf neu entwickelte, webbasierte Lösung handelt.
Wir sind nicht länger an 12-Spalten-Raster gebunden, die sich von links nach rechts bewegen. Möchten Sie Elemente unabhängig von der Reihenfolge ihres HTML-Quelltextes an bestimmten Stellen im Raster platzieren? Nur zu. Möchten Sie Elemente erstellen, die sich über mehrere Spalten und Zeilen erstrecken? Das ist kein Problem. Sehen Sie sich diese Demo an, die Craig Cook von Mozilla erstellt hat, um verschiedene Layout-Muster zu zeigen. Versuchen Sie, einige dieser Layouts mit Bootstrap nachzubilden (Hinweis: nicht möglich). Wir kratzen gerade erst an der Oberfläche dessen, was CSS Grids leisten können.