Wenn Sie eine Webanwendung erstellen, ist einer der ersten Schritte, die Sie benötigen, um das Layout des Inhalts Ihrer App zu gestalten.
Viele Designer verwenden imaginäre Raster, um das Layout von Inhalten zu gestalten, sei es für eine Website oder eine App. Die CSS-Gruppe hat hart daran gearbeitet, Layouts einfacher zu gestalten. Aus diesem Grund wurde das CSS Grid Layout Module entwickelt, das mittlerweile auch in Browsern verfügbar ist.
Diese Funktion kann in Chrome mit einer experimentellen Markierung getestet werden. Sie ist seit Version 10 auch in Internet Explorer implementiert und wird wahrscheinlich bald in den meisten Browsern verfügbar sein.
Kurzfassung
- Mit dem CSS-Rasterlayout können Sie Zeilen und Spalten für Ihr Layout definieren
- Raster können sich anpassen, um den verfügbaren Platz zu nutzen.
- Die Inhaltsreihenfolge kann unabhängig von der Anzeigereihenfolge des Rastercontainers sein
- Layouts können sich basierend auf Medienabfragen ändern, was responsives Webdesign erleichtert.
- Inhalte können sich überschneiden, was ein Layout ermöglicht, das mit anderen Methoden nicht möglich ist
- Rasterlayout ist schnell
In diesem Übersichtsvideo wird die Funktionsweise des CSS Grid Layouts ausführlich erklärt (Folien finden Sie hier):
Ausprobieren
Die Verwendung des CSS-Rasterlayouts in Chrome ist jetzt ganz einfach. Um die Funktion zu aktivieren, müssen Sie zuerst die Markierung „Experimentell“ aktivieren.
Laden Sie zuerst die URL chrome://flags und scrollen Sie nach unten zur Option Experimentelle Webplattformfunktionen aktivieren (siehe unten):
Klicken Sie einfach auf Aktivieren, um die Markierung zu aktivieren. Anschließend sollten Sie eine Aufforderung zum Neustart des Browsers sehen:
Klicken Sie nun einfach auf die Schaltfläche Jetzt neu starten, um den Browser neu zu starten. Anschließend können Sie das CSS-Grid-Layout ausprobieren.
Ihre Meinung zählt
Das CSS-Grid-Layout ist eine großartige neue Primitive für Webinhalte, aber wie immer sind wir alle sehr gespannt, was Entwickler darüber denken. Es gibt viele Möglichkeiten, Feedback zu geben. Hinterlasse hier einen Kommentar, sende eine E-Mail mit „[css-grid]“ in der Betreffzeile an die W3C CSS Working Group, protokolliere Programmfehler oder schreibe einen Blog und twittere deine Meinung. Wir freuen uns darauf, die tollen Layouts zu sehen, die Sie mit dieser überaus nützlichen neuen Funktion erstellen.