Untersuchen von CSS Grid-Layouts

Verwenden Sie die Registerkarte Layout im Tool Elemente , um CSS-Raster auf einer Website zu identifizieren und Rasterlayoutprobleme mithilfe anpassbarer Rasterüberlagerungen zu debuggen.

Ausführlicher Inhalt:

• Anzeigen der Rasterüberlagerung auf einer gerenderten Webseite
• Ausrichten von Rasterelementen und deren Inhalt: Das Raster-Editor-Popup
• Rasteranzeigeoptionen
• Einstellungen für die Überlagerungsanzeige
  • Zeilennummern anzeigen
  • Zeilenbeschriftungen ausblenden
  • Zeilennamen anzeigen
  • Anzeigen von Titelgrößen
  • Anzeigen von Bereichsnamen
  • Erweitern von Gitternetzlinien
• Rasterüberlagerungen
  • Aktivieren von Überlagerungsansichten mehrerer Raster
  • Anpassen der Rasterüberlagerungsfarbe
  • Hervorheben des Rasterelements in der Webseite und der DOM-Struktur
• Siehe auch

Anzeigen der Rasterüberlagerung auf einer gerenderten Webseite

CSS Grid ist ein leistungsfähiges Layoutparadigma für das Web. Eine gute Webseite, um mehr über CSS Grid und seine Features zu erfahren, ist das CSS-Rasterlayout bei MDN.

So verwenden Sie die Rasterüberlagerung auf einer gerenderten Webseite:

1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Seite, die das CSS-Rasterlayout-Layout verwendet, z. B. die Demoseite Untersuchen von CSS-Rasterlayouts .

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet, wobei das Tool Elemente ausgewählt ist und die DOM-Struktur anzeigt.

3. Erweitern Sie in der DOM-Struktur body>main.

   Die <div> Elemente verfügen über ein Rasterbadge :

   

   Wenn ein HTML-Element auf der Webseite darauf angewendet wurde oder display: inline-grid angewendet wurdedisplay: grid, wird neben dem Element in der DOM-Struktur im Tool Elemente ein Rasterbadge angezeigt.

4. Klicken Sie auf das Rasterbadge neben einem Element, z <div class="fruit-box">. B. :

   

   Eine Rasterüberlagerung wird über dem -Element auf der gerenderten Webseite angezeigt. Das Rasterbadge wechselt von blauem Text auf weißem Hintergrund zu weißem Text auf blauem Hintergrund.

   Auf der gerenderten Webseite wird die CSS Grid-Überlagerung auf einer Ebene vor dem Webseitenelement angezeigt. Die CSS Grid-Überlagerung zeigt die Position der Rasterlinien (Zeilen und Spalten) und Spuren an.

   Wenn Sie mehrmals auf das Rasterbadge klicken, wird es ein- und ausgeschaltet.

   Ebenso gibt es manchmal ein Unterrasterbadge . Sie können die GSS Grid-Überlagerung in einem Unterraster umschalten, indem Sie auf den Unterraster-Badge klicken. Weitere Informationen finden Sie unter Subgrid bei MDN.

5. Klicken Sie auf die Registerkarte Layout , die mit der Registerkarte Formatvorlagen im Tool Elemente gruppiert ist:

   

   Die Registerkarte Layout enthält einen Abschnitt Raster/Rasterspuren , der Folgendes enthält:

   • Eine Dropdownliste.
   • Kontrollkästchen für Anzeigeoptionen.
   • Ein Kontrollkästchen für jedes Element, das das CSS-Rasterlayout verwendet.

   Wenn eine Webseite ein CSS-Raster verwendet, enthält die Registerkarte Layout den Abschnitt Raster/Raster-Lanes . Verwenden Sie den Abschnitt Grid/Grid Lanes , um zu konfigurieren, welche Informationen in Rasterüberlagerungen auf der gerenderten Webseite angezeigt werden sollen.

Ausrichten von Rasterelementen und deren Inhalt: Das Raster-Editor-Popup

Sie können CSS-Rasterelemente und deren Inhalt ausrichten, indem Sie einfach auf eine Schaltfläche klicken (um das Raster-Editor-Popup zu öffnen), anstatt CSS-Regeln direkt definieren zu müssen.

So richten Sie CSS-Rasterelemente und deren Inhalt aus:

1. Führen Sie die Schritte unter Anzeigen der Rasterüberlagerung auf einer gerenderten Webseite oben aus.

   Daher wird die Registerkarte Layout für ein Element in der DOM-Struktur (z <div class="fruit-box">. B. ) mit einem Rasterbadge ausgewählt.

2. Wählen Sie die Registerkarte Formatvorlagen aus.

3. Suchen Sie eine CSS-Regel mit der Schaltfläche Raster-Editor öffnen , z. B. die .fruit-box Regel:

   

4. Klicken Sie in der CSS-Regel neben auf display: griddie Schaltfläche Raster-Editor öffnen .

   Das Raster-Editor-Popup wird geöffnet:

   

   Das Raster-Editor-Popup enthält vier Sätze von Schaltflächen als Optionen:

   • Inhalte ausrichten
   • justify-content
   • Elemente ausrichten
   • justify-items

   Innerhalb jeder Gruppe von Schaltflächen schließen sich die Schaltflächen gegenseitig aus. Wenn Sie zweimal auf eine Optionsschaltfläche klicken, wird in diesem Satz keine Optionsschaltfläche ausgewählt, und der Wert kehrt in den Normalzustand zurück.

5. Klicken Sie im Raster-Editor-Popup in einer beliebigen Gruppe von Schaltflächen auf eine Schaltfläche. Um zum Normalen zurückzukehren, klicken Sie zweimal auf eine Schaltfläche.

   Die Vordergrundfarbe der Schaltfläche ändert sich von Schwarz in Blau, und der Wert ändert sich von normal in den ausgewählten Wert.

   Die Rasterelemente und -inhalte werden im Viewport erneut gerendert.

Rasteranzeigeoptionen

Der Abschnitt Raster/Raster-Lanes im Layoutbereich enthält zwei Unterabschnitte:

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

Details finden Sie unten.

Einstellungen für die Überlagerungsanzeige

Im Bereich Layout des Elementtools im Abschnitt "Erweiterbares Raster/Rasterspuren" gibt es einen Unterabschnitt Overlay-Anzeigeeinstellungen:

Der Unterabschnitt Overlay-Anzeigeeinstellungen besteht aus zwei Teilen:

• Eine Dropdownliste mit den folgenden Befehlen:

  • Linienbeschriftungen ausblenden : Blenden Sie die Zeilenbeschriftungen 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 Zeilennamen für jede Rasterüberlagerung bei Rastern mit Zeilennamen an.

• Kontrollkästchen:

  • Titelgrößen anzeigen : Umschalten, um Titelgrößen ein- oder auszublenden.
  • Bereichsnamen anzeigen : Umschalten, um Bereichsnamen ein- oder auszublenden, bei Rastern mit benannten Rasterbereichen.
  • Gitternetzlinien erweitern : Gitternetzlinien werden standardmäßig nur innerhalb des Elements angezeigt, für das display: grid bzw display: inline-grid . das darauf festgelegt ist. Wenn Sie diese Option aktivieren, erstrecken sich die Rasterlinien auf jeder Achse bis zum Rand des Viewports.

Details finden Sie unten.

Zeilennummern anzeigen

Sie können Zeilennummern (Zeilen und Spalten) in der Rasterüberlagerung auf der gerenderten Webseite ein- oder ausblenden. In CSS Grid werden Zeilennummern verwendet, um die vertikalen und horizontalen Linien zu identifizieren, die Zeilen und Spalten eines CSS-Rasters trennen. Diese Zeilennummern gelten nicht für die Codezeilen in der HTML-Quelldatei.

So blenden Sie Zeilennummern (Zeilen und Spalten) in der Rasterüberlagerung ein oder aus:

1. Führen Sie die Schritte unter Anzeigen der Rasterüberlagerung auf einer gerenderten Webseite oben aus.

2. Wählen Sie im Abschnitt>Raster/Raster-Lanes unter Unterabschnitt >Zeilenbeschriftungen anzeigen die Option Zeilennummern anzeigen aus. Dies ist standardmäßig ausgewählt.

   Die Nummern der Zeilen (Zeilen und Spalten) für jede Rasterüberlagerung werden angezeigt:

   

Standardmäßig werden die positiven und negativen Zeilennummern (Zeilen und Spalten) auf der Rasterüberlagerung angezeigt. Informationen zu negativen Zahlen in der Rasterüberlagerung finden Sie unter Zählen nach hinten im Rasterlayout mithilfe der linienbasierten Platzierung bei MDN.

Zeilenbeschriftungen ausblenden

So blenden Sie Zeilenbeschriftungen in der Rasterüberlagerung aus:

1. Führen Sie die Schritte unter Anzeigen der Rasterüberlagerung auf einer gerenderten Webseite oben aus.

2. Wählen Sie im Abschnitt>Raster/Rasterspuren unter Unterabschnitt >Zeilenbeschriftungen anzeigen die Option Zeilenbeschriftungen ausblenden aus:

   

   Die Bezeichnungen der Zeilen (Zeilen/Spalten) sind auf jeder Rasterüberlagerung ausgeblendet.

Zeilennamen anzeigen

In der Rasterüberlagerung auf der gerenderten Webseite können Sie Zeilennamen anzeigen. Dies erleichtert die Visualisierung der Anfangs- und Endposition eines Elements.

So zeigen Sie Zeilennamen in der Rasterüberlagerung an:

1. Führen Sie die Schritte unter Anzeigen der Rasterüberlagerung auf einer gerenderten Webseite oben aus.

2. Wählen Sie im Abschnitt >Raster/Raster-Lanes Unterabschnitt Anzeigeeinstellungen für Überlagerungsanzeigen dropdownliste >Zeilenbeschriftungen anzeigen die Option Zeilennamen anzeigen aus:

   

   Zeilennamen anstelle von Zahlen werden angezeigt. Diese Option zeigt die Namen der Zeilen für jede Rasterüberlagerung an, wenn Namen angegeben werden.

   Im obigen Beispiel haben 4 Zeilen Namen: left, middle1, middle2und right.

   In der Demo erstreckt sich das Orange-Element von links nach rechts über grid-column: left - und grid-column: right CSS-Regeln.

Siehe auch:

• Layout mit benannten Gitternetzlinien bei MDN.

Anzeigen von Titelgrößen

In der Rasterüberlagerung auf der gerenderten Webseite können Sie Titelgrößen anzeigen.

So zeigen Sie Titelgrößen in der Rasterüberlagerung an:

1. Führen Sie die Schritte unter Anzeigen der Rasterüberlagerung auf einer gerenderten Webseite oben aus.

2. Aktivieren Sie auf der Registerkarte"Layout " des Tools "Elemente" im Abschnitt "Raster/Rasterspuren " im Unterabschnitt Grid/Grid Lanes overlays das Kontrollkästchen für jedes Element, auf dem die Rasterüberlagerung angezeigt werden soll. Aktivieren Sie beispielsweise das Kontrollkästchen neben div.fruit-box und div.snack-box.

3. Aktivieren Sie im Abschnitt >Raster-/Rasterspuren unter Einstellungen für die Überlagerungsanzeige das Kontrollkästchen Spurgrößen anzeigen:

   

Jede Zeilenbezeichnung zeigt die authored size (sofern im CSS definiert) und die computed size:

In der Demo werden die Spaltengrößen in der CSS-Eigenschaft grid-template-columnswie folgt definiert:

.fruit-box {
  display: grid;
  grid-template-columns: [left] 1fr [middle1] 1fr [middle2] 1fr [right];
  ...
}

.snack-box {
  display: grid;
  grid-template-columns: 1fr 2fr;
  ...
}

Spaltenbeschriftungen:

Für das Element <div class="snack-box">der Demo werden die folgenden Zeilenbeschriftungen in den Rasterspalten angezeigt:

Wenn die Anzeige Ihres Computers auf eine andere Pixeldichte festgelegt ist, erzeugt die Demo möglicherweise unterschiedliche Werte, z. B. halb so viele Pixel.

Die Zeilenbeschriftung in jeder Rasterspalte zeigt zusätzlich zu an authored sizecomputed size, da Spaltengrößen erstellt (angegeben) wurden, in der CSS-Eigenschaft grid-template-columns im CSS-Stylesheet.

Zeilenbeschriftungen:

Für das Element <div class="snack-box">der Demo werden die folgenden Zeilenbeschriftungen in den Rasterzeilen angezeigt:

Wenn die Anzeige Ihres Computers auf eine andere Pixeldichte festgelegt ist, erzeugt die Demo möglicherweise unterschiedliche Werte, z. B. halb so viele Pixel.

Die Zeilenbeschriftung in jeder Rasterzeile zeigt authored sizekeine an, nur die computed size, da zeilengrößen in der CSS-Eigenschaft grid-template-rows im CSS-Stylesheet nicht erstellt (angegeben) wurden.

Siehe auch:

• grid-template-columns bei MDN.
• grid-template-rows bei MDN.

Anzeigen von Bereichsnamen

In der Rasterüberlagerung auf der gerenderten Webseite können Sie Bereichsnamen anzeigen, z. B. top, bottom1 und bottom2.

So zeigen Sie Bereichsnamen an:

1. Führen Sie die Schritte unter Anzeigen der Rasterüberlagerung auf einer gerenderten Webseite oben aus.

2. Aktivieren Sie im Abschnitt>Raster/Raster-Lanes das Kontrollkästchen Bereichsnamen anzeigen:

   

Erweitern von Gitternetzlinien

Sie können die Rasterlinien der Rasterüberlagerung bis zum Rand des Viewports entlang jeder Achse erweitern.

So erweitern Sie die Rasterlinien:

1. Führen Sie die Schritte unter Anzeigen der Rasterüberlagerung auf einer gerenderten Webseite oben aus.

2. Aktivieren Sie im Abschnitt>Raster/Raster-Lanes das Kontrollkästchen Gitternetzlinien erweitern:

   

Rasterüberlagerungen

Auf der Registerkarte "Layout" des Tools "Elemente" (gruppiert mit der Registerkarte Formatvorlagen) enthält der Abschnitt Raster/Rasterspuren eine Liste von Elementen, die über ein CSS-Raster verfügen. Jedes Raster verfügt über ein Kontrollkästchen sowie verschiedene Optionen.

Aktivieren von Überlagerungsansichten mehrerer Raster

So aktivieren Sie Überlagerungsansichten mehrerer Raster:

1. Führen Sie die Schritte unter Anzeigen der Rasterüberlagerung auf einer gerenderten Webseite oben aus.

2. Aktivieren Sie im Unterabschnitt Raster/Raster-Lanes-Überlagerungen das Kontrollkästchen neben jedem Namen mehrerer Raster:>

   

   Für jedes ausgewählte Element, das über ein CSS-Raster verfügt, wird eine CSS Grid-Überlagerung angezeigt. Im obigen Beispiel sind drei Rasterüberlagerungen aktiviert. Jedes CSS-Raster hat eine andere Farbe in der gerenderten Webseite:

   • body – die goldfarbene Gitterüberlagerung.
   • div.fruit-box – die rosa Rasterüberlagerung.
   • div.snack-box – die blaue Rasterüberlagerung.

Anpassen der Rasterüberlagerungsfarbe

So passen Sie die Farbe der Rasterüberlagerung an:

1. Führen Sie die Schritte unter Anzeigen der Rasterüberlagerung auf einer gerenderten Webseite oben aus.

2. Klicken Sie im Unterabschnitt Raster/Raster-Lanes-Überlagerungen auf das Feld Überlagerungsfarbe für dieses Element auswählen neben einem Elementnamen:>

   

   Die Farbauswahl wird geöffnet.

Siehe auch:

• Ändern Sie farben mit der Farbauswahl in CSS-Features.

Hervorheben des Rasterelements in der Webseite und der DOM-Struktur

Für jedes Element, das über ein CSS-Rasterlayout verfügt, können Sie automatisch zu dem Element auf der gerenderten Webseite scrollen und das Element automatisch in der DOM-Struktur auswählen.

So scrollen Sie zu einem rasterbasierten Element auf der Webseite und wählen das Element in der DOM-Struktur aus:

1. Führen Sie die Schritte unter Anzeigen der Rasterüberlagerung auf einer gerenderten Webseite oben aus.

2. Klicken Sie im Unterabschnitt Raster/Raster-Lanes-Überlagerungen im Bereich > Elemente () neben einem Elementnamen auf die Schaltfläche Element anzeigen:

   

   • Die gerenderte Webseite wird zu dem Element gescrollt, das das CSS-Rasterlayout verwendet, und das Element wird auf der gerenderten Webseite kurz hervorgehoben.

   • Im Tool Elemente führt die DOM-Struktur automatisch einen Bildlauf zum Element durch, und das Element wird ausgewählt.

   Dieses automatische Scrollen und Hervorheben funktioniert unabhängig davon, ob das Kontrollkästchen des Elements aktiviert oder deaktiviert ist.

Siehe auch

Demo-Webseiten:

• Untersuchen von CSS Grid-Layouts

MDN:

• CSS-Rasterlayout
  • Rasterlayout mit linienbasierter Platzierung
  • Layout mit benannten Rasterlinien
• grid-template-columns
• grid-template-rows

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