Mit den Chrome-Entwicklertools können Sie mit einer Vielzahl von Visualisierungsoptionen das Debugging von CSS-Rasterlayouts intuitiv gestalten.
Im Video erfahren Sie, wie Sie das Raster-Overlay im Steuerfeld Elemente ein- und ausblenden und für Folgendes verwenden:
- Rasterlayouts visualisieren und prüfen
- Beachten Sie beim Platzieren von Rasterelementen die Zeilen- und Spaltennummern.
- Verwenden Sie Linien- und Bereichsnamen und sehen Sie diese auf dem Overlay, wenn Sie viele Rasterelemente haben und die Zahlen verwirrend sind.
- Prüfen Sie die Track-Größen.
Außerdem können Sie mit dem Rastereditor im Bereich Elemente > Stile Elemente und ihren Inhalt mit nur einem Klick in einem Rasterlayout ausrichten, statt CSS-Regeln einzugeben.
Weitere praktische Informationen finden Sie in der Anleitung CSS-Raster prüfen.