Layout-Inspektor für Flexbox und Grid

Chrome DevTools kennzeichnet Flex-Container im Elements-Panel mit einem „flex“-Badge neben ihrem DOM-Knoten. Durch Klicken auf das Badge wird das Flexbox-Overlay ein- oder ausgeblendet: farbige Linien zeigen Hauptachse, Querachse, Elementgrenzen und Abstände.

Grid-Container zeigen ein „grid“-Badge. Durch Klicken darauf wird das Grid-Overlay ein- oder ausgeblendet: farbige Linien für Spalten, Zeilen und Abstände. Dauerhafte Overlays, die im Layout-Panel angeheftet wurden, bleiben beim Scrollen oder Ändern der Größe des Viewports sichtbar.

DevTools → Elements → Layout listet alle Flex- und Grid-Container der Seite auf. Wenn Sie auf den Namen eines Containers klicken, wird er im DOM ausgewählt und sein Overlay ein- oder ausgeblendet. Das Erscheinungsbild des Overlays (Linienfarbe, Sichtbarkeit der Beschriftungen, Track-Größen) kann hier konfiguriert werden.

Das Overlay zeigt Track-Namen und -Größen an, wenn „Show track sizes“ aktiviert ist. Intrinsische Größen (auto, min-content, max-content) und gebrochene Einheiten (fr) werden mit ihren aufgelösten Pixelwerten angezeigt. So wird sichtbar, wie fr-Einheiten den verfügbaren Platz aufteilen.

Wählen Sie ein Flexbox-Element aus, also ein untergeordnetes Element eines Flex-Containers. Im Bereich „Styles“ wird die Kurzschreibweise flex in ihre Bestandteile aufgeschlüsselt: flex-grow, flex-shrink und flex-basis. Das Overlay hebt die Größe des Elements auf der Hauptachse, die Basis sowie angewendete Vergrößerungen oder Verkleinerungen hervor.

Grid-Container mit grid-template-areas zeigen Overlays für benannte Bereiche. Jede benannte Region ist beschriftet und farblich gekennzeichnet. So lässt sich einfach überprüfen, ob die Zuweisungen von grid-area der vorgesehenen Layoutvorlage entsprechen.

DevTools kennzeichnet Container mit Subgrid-Unterstützung deutlich. Ihre Track-Linien sind an den Tracks des übergeordneten Grids ausgerichtet. Das Overlay stellt diese Ausrichtung visuell dar und bestätigt damit, dass die Subgrid-Elemente am Koordinatensystem des übergeordneten Grids teilnehmen.

Eine falsche Ausrichtung von Elementen entsteht häufig durch fehlerhafte Werte für justify-content, align-items oder align-self. Das Flexbox-/Grid-Overlay zeigt die Positionen der Elemente relativ zu den Achsenlinien. Ändern Sie die Ausrichtungseigenschaften im Bereich „Styles“ und beobachten Sie die Änderungen im Overlay in Echtzeit.

Das Overlay stellt Abstände als farbige Bänder zwischen den Elementen dar. So können Sie die gap-Werte einfach überprüfen und feststellen, ob der Abstand durch gap (korrekt) oder durch margin entsteht, die in Flex-Zeilen möglicherweise unerwartet zusammenfallen kann.

Das Grid-Overlay unterscheidet implizite Tracks, die für überlaufende Elemente automatisch erstellt werden, von expliziten Tracks, die in grid-template definiert sind. Gestrichelte Linien kennzeichnen implizite Tracks. Wenn Inhalte unerwartete implizite Tracks erzeugen, macht das Overlay das Überlaufmuster sofort sichtbar.

Kombinieren Sie den Layout Inspector mit dem Device Mode. Ändern Sie die Größe des Viewports und beobachten Sie, wie Flexbox-Umbrüche und Grid-Tracks mit auto-fill oder auto-fit in Echtzeit neu angeordnet werden. So erkennen Sie Fehler in responsiven Layouts früher, als wenn Sie ein Browserfenster manuell skalieren.

Was zeigt das Grid-Overlay von DevTools, das auf der gerenderten Seite nicht sichtbar ist?

Der Flexbox- und Grid Layout Inspector von DevTools visualisiert Achsenlinien, Track-Größen, Abstände, benannte Bereiche und implizite Tracks als interaktive Overlays. Zusammen mit dem Layout-Bereich zur Verwaltung der Overlays macht er das Debuggen komplexer CSS-Layouts schneller und intuitiver, als wenn Sie ausschließlich den CSS-Code lesen.