Grid/Flex Vizualizator zazna vsak CSS Grid in Flexbox vsebnik ter prikaže njihovo strukturo kot barvne prekrivnike.
CSS Grid and Flexbox are the foundations of modern web layout, but they're invisible by default. You can't see grid lines, flex axes, or gap values just by looking at a page. Browser DevTools offer some grid overlay features, but they require you to find the container in the Elements panel first, enable the overlay manually, and only show one container at a time. Grid/Flex Visualizer automates this entirely — it scans the page, finds every Grid and Flex container, and renders their layout structure as visual overlays. Grid containers show column and row lines with track sizes labeled. Flex containers show the main axis direction, cross axis alignment, and how space is distributed. Gaps are highlighted with colored bands showing their pixel values. Click any container to see a detailed property panel with every layout property listed.
Grid containers show colored lines for every row and column track. Track sizes (1fr, auto, 200px) are labeled on each line. Gap areas are highlighted with semi-transparent bands showing the gap value in pixels. Implicit and explicit tracks are distinguished by solid vs dashed lines.
Flex containers show the main axis as an arrow (row, row-reverse, column, column-reverse) and the cross axis perpendicular to it. justify-content and align-items are visualized with labeled alignment indicators showing how space is distributed between children.
The tool automatically scans the entire page and finds every element with display: grid or display: flex (including inline variants). A badge count shows the total number detected. No need to manually select elements — they're all found and listed automatically.
Click any container to see its complete layout properties: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap, and all child sizing properties (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Each child element within a Grid or Flex container shows its actual rendered size, flex-grow/shrink values, and grid area placement. See exactly how much space each child occupies and why.
Detects Grid and Flex containers nested inside other Grid/Flex containers. The overlay renders each nesting level with different colors so you can see the complete layout hierarchy.
A grid column is wider or narrower than expected? The overlay shows the actual track sizes (1fr resolved to 342px, auto resolved to 156px) so you can see exactly how the browser calculated the sizes.
Why is one flex child wider than another? The visualizer shows flex-grow, flex-shrink, and flex-basis values for each child, making the space distribution logic visible.
Resize the browser and watch the grid overlay update in real-time. See how grid-template-columns changes from "1fr 1fr 1fr" at desktop to "1fr" at mobile, and verify the transition at each breakpoint.
Visit well-built websites and see how they use Grid and Flex layouts in production. The visual overlays make abstract concepts (fr units, auto-fit, justify-content) tangible and interactive.
Check that all card grids on a page use the same column count and gap values. The overlay makes inconsistencies immediately visible — one section using 20px gap while another uses 24px is obvious at a glance.
Open the DevSuite Pro floating dock and click the Grid/Flex Visualizer icon. The tool scans the page and detects all Grid and Flex containers.
Every Grid and Flex container gets a colored border overlay. A panel lists all detected containers with their type (Grid or Flex) and element selector.
Click any container to see its complete layout properties. Grid containers show track lines and sizes; Flex containers show axis directions and alignment.
Each child element displays its computed size and layout-specific properties (flex-grow, grid-area). Understand how space is distributed among children.
Click the tool icon again to remove all overlays and return to the normal page view.
Namestite DevSuite Pro brezplačno in odklenite več kot 39 orodij za razvijalce za svoj brskalnik.
