Sofia Emelianova
Mit den Chrome-Entwicklertools ist das Debugging von CSS-Rasterlayouts mit einer Vielzahl von Visualisierungsoptionen intuitiv.
Im Video erfahren Sie, wie Sie das Raster-Overlay im Steuerfeld Elemente umschalten und für Folgendes verwenden:
- Rasterlayouts visualisieren und untersuchen
- Sehen Sie sich die Zeilen- und Spaltennummern an, auf die Sie beim Platzieren von Rasterelementen zurückgreifen können.
- Verwenden Sie Linien- und Bereichsnamen, die im Overlay angezeigt werden, wenn Sie viele Rasterelemente haben und die Zahlen verwirrend sind.
- Prüfen Sie die Trackgrößen.
Außerdem können Sie mit dem Rastereditor im Bereich Elemente > Stile Elemente und ihre Inhalte mit nur einem Klick in einem Rasterlayout ausrichten, anstatt CSS-Regeln einzugeben.
Weitere praktische Informationen finden Sie in der Anleitung zum Inspect CSS Grid.