Trình hiển thị Grid/Flex phát hiện mọi vùng chứa CSS Grid và Flexbox và hiển thị cấu trúc của chúng dưới dạng lớp phủ có màu.
Trình hiển thị Grid/Flex phát hiện mọi vùng chứa CSS Grid và Flexbox và hiển thị cấu trúc của chúng dưới dạng lớp phủ có màu.
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.
Cài đặt DevSuite Pro miễn phí và mở khóa hơn 39 công cụ dành cho nhà phát triển cho trình duyệt của bạn.
