Untersuchen des CSS-Rasters

Dieser Artikel führt Sie durch das Identifizieren von CSS-Rastern auf einer Website und das Debuggen von Rasterlayoutproblemen mithilfe anpassbarer Rasterüberlagerungen.

Die in den Abbildungen in diesem Artikel verwendeten Beispiele stammen aus den folgenden Webseiten:

• Obstschachtel
• Snackbox

Bevor Sie beginnen

CSS Grid ist ein leistungsfähiges Layoutparadigma für das Web. Ein guter Ort, um sich mit CSS Grid und den vielen Features vertraut zu machen, ist der Leitfaden zum CSS-Rasterlayout auf MDN.

Ermitteln von CSS-Rastern

Wenn ein HTML-Element auf Ihrer Seite darauf angewendet wurde oder display: inline-grid angewendet wurdedisplay: grid, wird daneben im Tool Elemente ein grid Badge angezeigt:

Klicken Sie auf das Signal, um die Anzeige einer Rasterüberlagerung auf der Seite umzuschalten. Die Überlagerung wird über dem Element angezeigt, das wie ein Raster angeordnet ist, um die Position der Gitternetzlinien und Spuren anzuzeigen:

Öffnen Sie den Bereich Layout . Wenn Raster auf einer Seite enthalten sind, enthält der Layoutbereich einen Abschnitt Raster , der eine Reihe von Optionen zum Anzeigen der Raster enthält.

Der Abschnitt Raster im Layoutbereich enthält die folgenden zwei Unterabschnitte:

• Einstellungen für die Überlagerungsanzeige
• Rasterüberlagerungen

Einstellungen für die Überlagerungsanzeige

Auf der Registerkarte Layout im Abschnitt erweiterbares Raster enthält der Abschnitt Überlagerungsanzeigeeinstellungen die folgende Benutzeroberfläche.

Dropdownliste

Wählen Sie in der Dropdownliste eine der folgenden Optionen aus:

Zeilenoption	Details
Zeilenbeschriftungen ausblenden	Blenden Sie die Bezeichnungen der Linien für jede Rasterüberlagerung aus.
Zeilennummern anzeigen	Zeigt die Zeilennummern für jede Rasterüberlagerung an (standardmäßig ausgewählt).
Zeilennamen anzeigen	Zeigt die Namen der Zeilen für jede Rasterüberlagerung an, wenn Namen angegeben werden.

In den folgenden Abschnitten werden die Dropdownlistenbefehle für Overlay-Anzeigeeinstellungen erläutert.

Zeilenbeschriftungen ausblenden

Wählen Sie in der Dropdownliste Zeilenbeschriftungen ausblenden aus, um die Bezeichnungen der Zeilen für jede Rasterüberlagerung auszublenden.

Zeilennummern anzeigen

Wählen Sie in der Dropdownliste Zeilennummern anzeigen aus, um die Zeilennummern für jede Rasterüberlagerung anzuzeigen (standardmäßig ausgewählt).

Standardmäßig werden die positiven und negativen Zeilennummern auf der Rasterüberlagerung angezeigt.

Weitere Informationen zu negativen Zahlen in der Rasterüberlagerung finden Sie unter Linienbasierte Platzierung mit CSS Grid.

Zeilennamen anzeigen

Wählen Sie in der Dropdownliste Zeilennamen anzeigen aus, um die Zeilennamen anstelle von Zahlen anzuzeigen. Dadurch werden die Namen der Zeilen für jede Rasterüberlagerung angezeigt, wenn Namen angegeben werden. Im Beispiel haben 4 Zeilen Namen: left, middle1, middle2und right.

Weitere Informationen zu Zeilennamen in der Rasterüberlagerung finden Sie unter Layout mit benannten Gitternetzlinien.

Kontrollkästchen

Aktivieren Sie eines der Kontrollkästchen im Abschnitt Overlay-Anzeigeeinstellungen :

Option	Details
Anzeigen von Titelgrößen	Anzeigen (oder Ausblenden) der Größen der Spuren.
Anzeigen von Bereichsnamen	Anzeigen (oder Ausblenden) der Namen des Bereichs, wenn Namen angegeben werden.
Erweitern von Gitternetzlinien	Zeigt die Erweiterungen der Rasterdimensionen entlang jeder Achse an (oder blendet sie aus). Standardmäßig werden Rasterlinien nur innerhalb des Elements angezeigt, auf display: grid dem oder display: inline-grid CSS festgelegt ist.

In den folgenden Abschnitten werden diese Kontrollkästchen erläutert.

Anzeigen von Titelgrößen

Aktivieren Sie das Kontrollkästchen Spurgrößen anzeigen , um die Spurgrößen des Rasters anzuzeigen.

DevTools zeigt [authored size] und [computed size] in jeder Zeilenbezeichnung an.

Size	Details
Erstellte Größe	Die im Stylesheet definierte Größe (ausgelassen, wenn nicht definiert).
Berechnete Größe	Die tatsächliche Größe auf dem Bildschirm.

In der Demo werden die snack-box Spaltengrößen im grid-template-columns:1fr 2fr; CSS definiert. Daher werden in den Spaltenzeilenbezeichnungen sowohl erstellte als auch berechnete Größen angezeigt.

Titelgröße	Erstellte Größe	Berechnete Größe
1fr • 96,66px	1fr	96,66 Pixel
2fr • 193,32px	2fr	193,32 Pixel

Die Zeilenzeilenbeschriftungen zeigen nur berechnete Größen an, da im Stylesheet keine Zeilengrößen definiert sind.

Titelgröße	Erstellte Größe	Berechnete Größe
80px		80px
80px		80px

Anzeigen von Bereichsnamen

Um die Bereichsnamen anzuzeigen, aktivieren Sie das Kontrollkästchen Bereichsnamen anzeigen . Im Beispiel gibt es drei Bereiche im Raster: top, bottom1 und bottom2.

Erweitern von Gitternetzlinien

Aktivieren Sie das Kontrollkästchen Rasterlinien erweitern , um die Rasterlinien bis zum Rand des Viewports entlang jeder Achse zu erweitern.

Rasterüberlagerungen

Der Abschnitt Rasterüberlagerungen enthält eine Liste von Rastern, die auf der Seite vorhanden sind, jeweils mit einem Kontrollkästchen sowie verschiedenen Optionen.

Aktivieren von Überlagerungsansichten mehrerer Raster

Um das Überlagerungsraster für mehrere Raster anzuzeigen, aktivieren Sie das Kontrollkästchen neben jedem Namen des Rasters. Im Beispiel sind zwei Rasterüberlagerungen aktiviert, die jeweils mit unterschiedlichen Farben dargestellt werden:

• main
• div.snack-box

Anpassen der Rasterüberlagerungsfarbe

Um die Farbauswahl zu öffnen und die Rasterüberlagerungsfarbe anzupassen, klicken Sie auf das Feld neben dem Namen der Rasterüberlagerung:

Hervorheben des Rasters

Um das HTML-Element im Tool Elemente hervorzuheben und auf der Webseite zu diesem zu scrollen, klicken Sie im Bereich Elemente auf das Symbol Element anzeigen ().

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite finden Sie hier und wird von Jecelyn Yeen (Developer Advocate, Chrome DevTools) verfasst.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.