In diesem Leitfaden erfahren Sie, wie Sie CSS-Raster auf einer Seite finden, untersuchen und Layoutprobleme im Bereich Elemente der Chrome-Entwicklertools beheben.
Die in den Screenshots in diesem Artikel gezeigten Beispiele stammen von den beiden Webseiten Fruit Box und Snack Box.
CSS-Raster entdecken
Wenn auf ein HTML-Element auf Ihrer Seite display: grid oder display: inline-grid angewendet wurde, wird neben diesem Element im Bereich Elemente ein grid-Logo angezeigt.
Klicken Sie auf das Badge, um ein Raster-Overlay auf der Seite einzublenden. Das Overlay wird über dem Element angezeigt. Es ist wie ein Raster aufgebaut, um die Position der Rasterlinien und -spuren anzuzeigen:
Öffnen Sie den Bereich Layout. Wenn Raster auf einer Seite vorhanden sind, enthält der Layoutbereich den Abschnitt Raster mit einer Reihe von Optionen zur Anzeige dieser Raster.
Rasterelemente und deren Inhalt mit dem Rastereditor ausrichten
Sie können Rasterelemente und deren Inhalt mit einem Klick auf eine Schaltfläche ausrichten, anstatt CSS-Regeln einzugeben.
So richten Sie Rasterelemente und ihren Inhalt aus:
Klicken Sie im Bereich Elemente > Stile neben
display: gridauf die Schaltfläche
Rastereditor.
Klicken Sie im Rastereditor auf die entsprechenden Schaltflächen, um die CSS-Eigenschaften
align-*undjustify-*für die Rasterelemente und ihren Inhalt festzulegen.
Sehen Sie sich die angepassten Rasterelemente und Inhalte im Darstellungsbereich an.
Optionen für die Rasteransicht
Der Abschnitt Raster im Bereich Layout enthält zwei Unterabschnitte:
- Overlay-Anzeigeeinstellungen
- Raster-Overlays
Sehen wir uns diese Unterabschnitte im Detail an.
Overlay-Anzeigeeinstellungen
Die Overlay-Anzeigeeinstellungen bestehen aus zwei Teilen:
a. Ein Drop-down-Menü mit den folgenden Optionen:
- Linienlabels ausblenden: Blenden Sie die Linienlabels für jedes Raster-Overlay aus.
- Zeilennummern anzeigen: Die Zeilennummern für jedes Raster-Overlay werden angezeigt (standardmäßig ausgewählt).
- Liniennamen anzeigen: Bei Rastern mit Liniennamen werden die Zeilennamen für jedes Raster-Overlay angezeigt.
b. Kästchen mit Optionen innerhalb von:
- Trackgrößen anzeigen: Aktivieren oder deaktivieren Sie die Trackgrößen, um sie ein- oder auszublenden.
- Bereichsnamen anzeigen: Mit dieser Ein/Aus-Schaltfläche können Sie Bereichsnamen ein- oder ausblenden, wenn es sich um Raster mit benannten Rasterbereichen handelt.
- Rasterlinien erweitern: Standardmäßig werden Rasterlinien nur innerhalb des Elements angezeigt, auf dem
display: gridoderdisplay: inline-gridfestgelegt ist. Wenn Sie diese Option aktivieren, werden die Rasterlinien entlang jeder Achse bis zum Rand des Darstellungsbereichs erweitert.
Sehen wir uns diese Einstellungen genauer an.
Zeilennummern anzeigen
Standardmäßig werden die positiven und negativen Zeilennummern auf dem Raster-Overlay angezeigt.
Linienlabels ausblenden
Wählen Sie Zeilenlabels ausblenden aus, um die Zeilennummern auszublenden.
Zeilennamen anzeigen
Sie können Zeilennamen anzeigen auswählen, um statt der Zahlen die Zeilennamen zu sehen. In diesem Beispiel haben wir vier Zeilen mit Namen: left, middle1, middle2 und right.
In dieser Demo erstreckt sich das orange-Element mit der CSS-Eigenschaft grid-column: left / right von links nach rechts.
Dadurch lassen sich die Start- und Endposition des Elements leichter visualisieren.
Track-Größen anzeigen
Klicken Sie das Kästchen Trackgrößen anzeigen an, um die Trackgrößen des Rasters zu sehen.
Die Entwicklertools zeigen in jedem Zeilenlabel [authored size] - [computed size] an: Verfasst: die im Stylesheet definierte Größe (ausgelassen, wenn nicht definiert). Berechnete Größe: Die tatsächliche Größe auf dem Bildschirm.
In dieser Demo werden die Spaltengrößen für snack-box im CSS-grid-template-columns:1fr 2fr; definiert.
Daher zeigen die Spaltenzeilenbeschriftungen sowohl die erstellte als auch die berechneten Größen an: 1fr - 96.66px und 2fr - 193.32px.
Die Zeilenlinienlabels zeigen nur die berechneten Größen 80px und 80px an, da im Stylesheet keine Zeilengrößen definiert sind.
Gebietsnamen anzeigen
Um die Bereichsnamen anzuzeigen, aktivieren Sie das Kontrollkästchen Gebietsnamen anzeigen. In diesem Beispiel gibt es drei Bereiche im Raster: top, bottom1 und bottom2.
Gitterlinien erweitern
Klicken Sie das Kästchen Rasterlinien verlängern an, um die Rasterlinien bis zum Rand des Darstellungsbereichs entlang jeder Achse zu erweitern.
Raster-Overlays
Der Abschnitt Raster-Overlays enthält eine Liste der auf der Seite vorhandenen Raster mit jeweils einem Kästchen sowie verschiedenen Optionen.
Overlay-Ansichten mehrerer Raster aktivieren
Sie können Overlay-Ansichten mehrerer Raster aktivieren. In diesem Beispiel sind zwei Raster-Overlays aktiviert: main und div.snack-box, die jeweils mit unterschiedlichen Farben dargestellt werden.
Farbe des Raster-Overlays anpassen
Durch Klicken auf die Farbauswahl können Sie die einzelnen Raster-Overlays anpassen.
Raster hervorheben
Klicken Sie auf das Hervorhebungssymbol, um das HTML-Element sofort zu markieren, scrollen Sie auf der Seite zum entsprechenden Element und wählen Sie es im Bereich „Elemente“ aus.
