Beim Erstellen einer Webanwendung ist einer der ersten Schritte eine Möglichkeit, das Layout der Inhalte Ihrer App festzulegen.
Viele Designer verwenden imaginäre Raster für das Layout von Inhalten, ganz gleich, ob es sich um eine Website oder eine App handelt. Die CSS-Gruppe hat hart daran gearbeitet, Layouts einfacher zu gestalten, und hat als Teil davon das CSS Grid Layout Module entwickelt, das jetzt in Browsern entwickelt wird.
Diese Funktion kann in Chrome unter Verwendung eines experimentellen Flags getestet werden. Es ist auch in Internet Explorer seit Version 10 implementiert und wird wahrscheinlich bald auch in den meisten Browsern verfügbar sein.
Kurzfassung
- Mit CSS Grid Layout können Sie Zeilen und Spalten für Ihr Layout definieren
- Raster können sich anpassen, um den verfügbaren Platz zu nutzen.
- Die Reihenfolge der Inhalte kann unabhängig von der Anzeigereihenfolge des Rastercontainers sein
- Layouts können sich basierend auf Medienabfragen ändern, was das responsive Design erleichtert.
- Inhalte können sich überlappen, was ein Layout ermöglicht, das mit anderen Methoden nicht möglich wäre.
- Rasterlayout ist schnell
In diesem Übersichtsvideo erfahren Sie mehr über die Funktionsweise von CSS-Rasterlayouts (Folien finden Sie hier:
Ausprobieren
Die Verwendung des CSS-Rasterlayouts in Chrome ist jetzt ganz einfach. Zunächst müssen Sie das Flag "experimentell" aktivieren, um die Funktion zu aktivieren.
Laden Sie zuerst die URL chrome://flags und scrollen Sie nach unten zur Option Experimentelle Webplattformfunktionen aktivieren:
Klicken Sie einfach auf Aktivieren, um das Flag zu aktivieren. Sie sollten dann eine Aufforderung zum Neustarten des Browsers sehen, die wie folgt aussieht:
Klicken Sie nun einfach auf die Schaltfläche Jetzt neu starten, um Ihren Browser neu zu starten und schon können Sie das CSS-Raster-Layout ausprobieren.
Ihre Meinung zählt
CSS Grid Layout ist ein hervorragendes neues Primitiv für Webinhalte, aber wir sind wie immer gespannt, was Entwickler davon halten. Es gibt viele Möglichkeiten, Feedback zu geben. Hinterlasse hier einen Kommentar, sende eine E-Mail an die W3C-Liste der CSS-Arbeitsgruppen und verwende „[css-grid]“ in der Betreffzeile, protokolliere Bugs oder schreibe einen Blog und twittere, was du davon hältst. Wir freuen uns darauf, die großartigen Layouts zu sehen, die Sie mit dieser super nützlichen neuen Funktion erstellen.