Der Grid/Flex-Visualisierer erkennt jeden CSS Grid- und Flexbox-Container auf einer Webseite und rendert deren Layout-Struktur als bunte Überlagerungen direkt auf der Seite. Sehen Sie Gitterlinien, Track-Größen, Gap-Werte, Flex-Richtungen, Ausrichtungsachsen und Kind-Element-Größen — alles ohne Öffnen der DevTools visualisiert.
CSS Grid und Flexbox sind die Grundlagen moderner Web-Layouts, aber sie sind standardmäßig unsichtbar. Sie können Gitterlinien, Flex-Achsen oder Gap-Werte nicht sehen, indem Sie eine Seite betrachten. Browser-DevTools bieten einige Grid-Overlay-Funktionen, aber Sie müssen den Container zuerst im Elements-Panel finden, das Overlay manuell aktivieren und es wird immer nur ein Container gleichzeitig angezeigt. Der Grid/Flex-Visualisierer automatisiert dies vollständig — er scannt die Seite, findet jeden Grid- und Flex-Container und rendert deren Layout-Struktur als visuelle Überlagerungen. Grid-Container zeigen Spalten- und Zeilenlinien mit beschrifteten Track-Größen. Flex-Container zeigen die Hauptachsenrichtung, Querachsenausrichtung und wie der Platz verteilt wird. Gaps werden mit farbigen Bändern hervorgehoben, die ihre Pixelwerte anzeigen. Klicken Sie auf einen Container, um ein detailliertes Eigenschaften-Panel mit allen aufgelisteten Layout-Eigenschaften zu sehen.
Grid-Container zeigen farbige Linien für jeden Zeilen- und Spalten-Track. Track-Größen (1fr, auto, 200px) sind auf jeder Linie beschriftet. Gap-Bereiche werden mit halbtransparenten Bändern hervorgehoben, die den Gap-Wert in Pixeln anzeigen. Implizite und explizite Tracks werden durch durchgezogene vs. gestrichelte Linien unterschieden.
Flex-Container zeigen die Hauptachse als Pfeil (row, row-reverse, column, column-reverse) und die senkrecht dazu verlaufende Querachse. justify-content und align-items werden mit beschrifteten Ausrichtungsindikatoren visualisiert, die zeigen, wie der Platz zwischen den Kindelementen verteilt wird.
Das Tool scannt automatisch die gesamte Seite und findet jedes Element mit display: grid oder display: flex (einschließlich Inline-Varianten). Ein Badge-Zähler zeigt die Gesamtzahl der erkannten Container. Kein manuelles Auswählen von Elementen nötig — alle werden automatisch gefunden und aufgelistet.
Klicken Sie auf einen Container, um seine vollständigen Layout-Eigenschaften anzuzeigen: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap und alle Kind-Größeneigenschaften (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Jedes Kindelement in einem Grid- oder Flex-Container zeigt seine tatsächliche gerenderte Größe, flex-grow/shrink-Werte und die Grid-Bereich-Platzierung. Sehen Sie genau, wie viel Platz jedes Kindelement belegt und warum.
Erkennt Grid- und Flex-Container, die in anderen Grid/Flex-Containern verschachtelt sind. Die Überlagerung rendert jede Verschachtelungsebene mit unterschiedlichen Farben, damit Sie die vollständige Layout-Hierarchie sehen können.
Eine Grid-Spalte ist breiter oder schmaler als erwartet? Die Überlagerung zeigt die tatsächlichen Track-Größen (1fr aufgelöst zu 342px, auto aufgelöst zu 156px), sodass Sie genau sehen, wie der Browser die Größen berechnet hat.
Warum ist ein Flex-Kind breiter als ein anderes? Der Visualisierer zeigt flex-grow, flex-shrink und flex-basis-Werte für jedes Kind und macht die Platzverteilungslogik sichtbar.
Ändern Sie die Browsergröße und beobachten Sie, wie die Grid-Überlagerung in Echtzeit aktualisiert wird. Sehen Sie, wie grid-template-columns von 1fr 1fr 1fr auf dem Desktop zu 1fr auf Mobilgeräten wechselt, und überprüfen Sie den Übergang an jedem Breakpoint.
Besuchen Sie gut gestaltete Websites und sehen Sie, wie sie Grid- und Flex-Layouts im Produktionseinsatz verwenden. Die visuellen Überlagerungen machen abstrakte Konzepte (fr-Einheiten, auto-fit, justify-content) greifbar und interaktiv.
Überprüfen Sie, ob alle Karten-Grids auf einer Seite die gleiche Spaltenanzahl und Gap-Werte verwenden. Die Überlagerung macht Inkonsistenzen sofort sichtbar — ein Abschnitt mit 20px Gap und ein anderer mit 24px ist auf einen Blick offensichtlich.
Öffnen Sie das DevSuite Pro Floating Dock und klicken Sie auf das Symbol des Grid/Flex-Visualisierers. Das Tool scannt die Seite und erkennt alle Grid- und Flex-Container.
Jeder Grid- und Flex-Container erhält eine farbige Rahmenüberlagerung. Ein Panel listet alle erkannten Container mit ihrem Typ (Grid oder Flex) und Element-Selektor auf.
Klicken Sie auf einen Container, um seine vollständigen Layout-Eigenschaften anzuzeigen. Grid-Container zeigen Track-Linien und -Größen; Flex-Container zeigen Achsenrichtungen und Ausrichtung.
Jedes Kindelement zeigt seine berechnete Größe und layoutspezifische Eigenschaften (flex-grow, grid-area). Verstehen Sie, wie der Platz unter den Kindelementen verteilt wird.
Klicken Sie erneut auf das Tool-Symbol, um alle Überlagerungen zu entfernen und zur normalen Seitenansicht zurückzukehren.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.
