In diesem Leitfaden erfahren Sie, wie Sie CSS-Raster auf einer Seite erkennen, sie untersuchen und Layoutprobleme im Bereich Elemente der Chrome-Entwicklertools beheben.
Die Beispiele in den Screenshots in diesem Artikel stammen von den beiden Webseiten Fruitbox und Snackbox.
CSS-Raster entdecken
Wenn auf ein HTML-Element auf Ihrer Seite display: grid oder display: inline-grid angewendet wurde, wird daneben im Steuerfeld Elemente das Logo grid angezeigt.
Klicken Sie auf das Badge, um die Anzeige eines Raster-Overlays auf der Seite ein- und auszuschalten. Das Overlay wird wie ein Raster über dem Element angezeigt, um die Position seiner Rasterlinien und Tracks anzuzeigen:
Öffnen Sie den Bereich Layout. Wenn eine Seite Raster enthält, enthält der Layoutbereich den Abschnitt Raster mit einer Reihe von Optionen zum Ansehen dieser Raster.
Rasterelemente und ihre Inhalte am Rastereditor ausrichten
Sie können Rasterelemente und ihre Inhalte mit einem Klick auf eine Schaltfläche ausrichten, anstatt CSS-Regeln einzugeben.
So richten Sie Rasterelemente und ihre Inhalte 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 deren Inhalte 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 Unterbereiche:
- Overlay-Anzeigeeinstellungen
- Raster-Overlays
Sehen wir uns diese Unterabschnitte genauer an.
Overlay-Anzeigeeinstellungen
Die Overlay-Anzeigeeinstellungen bestehen aus zwei Teilen:
a. Ein Drop-down-Menü mit den folgenden Optionen:
- Zeilenlabels ausblenden: Damit werden die Linienlabels für die einzelnen Rasterüberlagerungen ausgeblendet.
- Zeilennummern anzeigen: Zeilennummern für jedes Raster-Overlay anzeigen (standardmäßig ausgewählt).
- Zeilennamen anzeigen: Bei Rastern mit Zeilennamen werden die Zeilennamen für jedes Raster-Overlay angezeigt.
b. Kästchen mit Optionen innerhalb von:
- Trackgrößen anzeigen: Hier können Sie die Trackgrößen ein- oder ausblenden.
- Show Area Name (Bereichsnamen anzeigen): Aktivieren oder deaktivieren Sie die Option, um Bereichsnamen bei Rastern mit benannten Rasterbereichen ein- oder auszublenden.
- Rasterlinien verlängern: Standardmäßig werden Rasterlinien nur innerhalb des Elements angezeigt, auf das
display: gridoderdisplay: inline-gridfestgelegt ist. Wenn Sie diese Option aktivieren, erstrecken sich die Rasterlinien zum Rand des Darstellungsbereichs entlang der jeweiligen Achse.
Sehen wir uns diese Einstellungen einmal genauer an.
Zeilennummern anzeigen
Standardmäßig werden positive und negative Linienzahlen auf dem Raster-Overlay angezeigt.
Zeilenlabels ausblenden
Wählen Sie Zeilenlabels ausblenden aus, um die Zeilennummern auszublenden.
Zeilennamen anzeigen
Sie können Zeilennamen anzeigen auswählen, um anstelle von 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 von links nach rechts, mit CSS-grid-column: left / right.
Durch die Angabe von Liniennamen lassen sich die Start- und Endposition des Elements leichter visualisieren.
Track-Größen anzeigen
Aktivieren Sie das Kästchen Trackgrößen anzeigen, um die Trackgrößen des Rasters zu sehen.
Die Entwicklertools zeigen [authored size] - [computed size] in jeder Zeilenbezeichnung an: Authored-Größe: Die im Stylesheet definierte Größe (ausgelassen, wenn nicht definiert). Berechnete Größe: Die tatsächliche Größe des Bildschirms.
In dieser Demo werden die Spaltengrößen snack-box im CSS-grid-template-columns:1fr 2fr; definiert.
Daher zeigen die Spaltenzeilenbeschriftungen sowohl die verfassten als auch die berechneten Größen an: 1fr - 96.66px und 2fr - 193, 32px.
Die Zeilenlinienlabels zeigen nur berechnete Größen an: 80px und 80px, da im Stylesheet keine Zeilengrößen definiert sind.
Gebietsnamen anzeigen
Aktivieren Sie das Kästchen Gebietsnamen anzeigen, um die Bereichsnamen zu sehen. In diesem Beispiel gibt es drei Bereiche im Raster: top, bottom1 und bottom2.
Rasterlinien verlängern
Aktivieren Sie das Kästchen Rasterlinien verlängern, 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, die jeweils ein Kästchen sowie verschiedene Optionen haben.
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
Sie können die einzelnen Raster-Overlays anpassen, indem Sie auf die Farbauswahl klicken.
Raster hervorheben
Klicken Sie auf das Symbol „Hervorheben“, um das HTML-Element sofort zu markieren. Scrollen Sie auf der Seite dorthin und wählen Sie es im Bereich „Elemente“ aus.
