Entwicklertools-Tipps: CSS-Raster prüfen

Sofia Emelianova
Sofia Emelianova

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:

Raster-Overlay.

  • 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.

Rastereditor

Weitere praktische Informationen finden Sie in der Anleitung CSS-Raster prüfen.