Entwicklertools-Tipps: CSS-Raster prüfen

Sofia Emelianova
Sofia Emelianova

Mit den Chrome-Entwicklertools können Sie CSS-Rasterlayouts mithilfe einer Vielzahl von Visualisierungsoptionen intuitiv debuggen.

Im Video erfahren Sie, wie Sie das Raster-Overlay im Bereich Elemente ein- und ausblenden und wie Sie es für Folgendes verwenden:

Raster-Overlay

  • Rasterlayouts visualisieren und prüfen
  • Hier sehen Sie die Zeilen- und Spaltennummern, die Sie beim Platzieren von Rasterelementen verwenden können.
  • Verwenden Sie Linien- und Gebietsnamen und sehen Sie sie sich im Overlay an, wenn Sie viele Rasterelemente haben und die Zahlen verwirrend sind.
  • Prüfen Sie die Track-Größen.

Außerdem können Sie mit dem Raster-Editor im Bereich Elemente > Styles Elemente und ihren Inhalt mit nur einem Klick in einem Rasterlayout ausrichten, anstatt CSS-Regeln einzugeben.

Im Raster-Editor

Wenn Sie das in der Praxis erleben möchten, folgen Sie dem Tutorial CSS-Raster prüfen.