Wenn Sie eine Webanwendung erstellen, ist eines der ersten Dinge, die Sie benötigen, eine Möglichkeit, den Inhalt Ihrer App zu layouten.
Viele Designer verwenden imaginäre Raster, um Inhalte zu layouten, sei es für eine Website oder eine App. Die CSS-Gruppe hat hart daran gearbeitet, Layouts zu vereinfachen, und hat in diesem Zusammenhang das CSS-Grid-Layout-Modul entwickelt, das jetzt in Browsern eingesetzt wird.
Diese Funktion kann in Chrome mit einem experimentellen Flag getestet werden. Sie ist auch seit Version 10 im IE implementiert und wird wahrscheinlich bald in den meisten Browsern verfügbar sein.
Kurze Zusammenfassung
- Mit dem CSS-Rasterlayout können Sie Zeilen und Spalten für Ihr Layout definieren.
- Raster können sich an den verfügbaren Platz anpassen
- Die Reihenfolge der Inhalte kann von der Reihenfolge der Anzeige des Rastercontainers abweichen
- Layouts können sich anhand von Medienabfragen ändern, was responsives Webdesign vereinfacht
- Inhalte können sich überschneiden, was mit anderen Methoden nicht möglich ist
- Rasterlayout ist schnell
Hier ist ein Übersichtsvideo, in dem die Funktionsweise des CSS-Rasterlayouts erklärt wird (Folien hier:
Jetzt ausprobieren
Das CSS-Grid-Layout in Chrome ist jetzt ganz einfach zu verwenden. Aktivieren Sie zuerst das experimentelle Flag, um die Funktion zu aktivieren.
Rufen Sie zuerst die URL chrome://flags auf und scrollen Sie nach unten zur Option Experimentelle Webplattformfunktionen aktivieren (siehe Abbildung unten):
Klicken Sie einfach auf Aktivieren, um das Flag zu aktivieren. Daraufhin wird eine Aufforderung zum Neustarten des Browsers angezeigt, die so aussieht:
Klicken Sie jetzt einfach auf die Schaltfläche Jetzt neu starten, um Ihren Browser neu zu starten. Sie können dann das CSS-Grid-Layout ausprobieren.
Ihre Meinung zählt
Das CSS-Grid-Layout ist ein großartiges neues Markup-Element für Webinhalte. Wie immer sind wir aber gespannt, was Entwickler dazu denken. Es gibt viele Möglichkeiten, Feedback zu geben: Sie können hier einen Kommentar hinterlassen, eine E-Mail an die W3C CSS Working Group-Liste mit dem Betreff „[css-grid]“ senden, Fehler melden oder Ihre Meinung in Blogs und Tweets äußern. Wir sind schon gespannt auf die tollen Layouts, die ihr mit dieser nützlichen neuen Funktion erstellen werdet.