Inspect & Debug

Flex/Grid Layout Inspector — See CSS Layout Live

Hover a live flex or grid container to see its boundary and direct children overlaid on the page. Pin a layout to read computed tracks, direction, wrapping, gaps and alignment values.

What is Flex/Grid Layout Inspector?

The Flex/Grid Layout Inspector in UltraDevKit helps you work with a live web page. Hover a live flex or grid container to see its boundary and direct children overlaid on the page. Pin a layout to read computed tracks, direction, wrapping, gaps and alignment values.

Category

Inspect & Debug

Best for

Understand why a flex item is shrinking, wrapping or misaligned; See the real grid tracks and direct-child boundaries in a dense layout

Runs on

Any page in Chrome

When you'd use it

• Understand why a flex item is shrinking, wrapping or misaligned
• See the real grid tracks and direct-child boundaries in a dense layout
• Debug a responsive breakpoint using the page as it actually renders
• Explain a layout issue to a teammate with a clear visual overlay

How to use Flex/Grid Layout Inspector

1. Open Flex/Grid Layout Inspector on the page you are building or reviewing.
2. Move over the page to highlight the nearest flex or grid container.
3. Click the container to pin its overlay while you inspect the values.
4. Read computed direction or tracks, gap, justify and align settings in the panel.

Flex/Grid Layout Inspector FAQ

Does it change the page layout?

No. The overlay is non-interactive and the inspector only reads computed styles and element geometry.

Why is a container not highlighted?

The tool checks the nearest ancestor with a flex or grid display. Make sure the element is currently rendered and that you are not hovering UltraDevKit's own panel.

Can I inspect nested layouts?

Yes. Hover the nested container directly, then click it to pin that specific level rather than its parent.

Works well with