Layout Inspector for Flexbox and Grid

Chrome DevTools marks flex containers with a "flex" badge next to their DOM node in the Elements panel. Clicking the badge toggles the Flexbox overlay — colored lines showing main axis, cross axis, item boundaries, and gap spacing.

Grid containers show a "grid" badge. Clicking it toggles the grid overlay: colored lines for columns, rows, and gaps. Persistent overlays (pinned in Layout panel) stay visible as you scroll or resize the viewport.

DevTools → Elements → Layout tab lists all flex and grid containers on the page. Clicking a container name selects it in the DOM and toggles its overlay. Overlay appearance (line color, label visibility, track sizes) is configurable here.

The overlay shows track names and sizes when "Show track sizes" is enabled. Intrinsic sizes (auto, min-content, max-content) and fractional units (fr) display their resolved pixel values — revealing how fr units divide available space.

Select a flex item (child of a flex container). The Styles panel shows flex: shorthand expansion — flex-grow, flex-shrink, flex-basis. The overlay highlights the item's main-axis size, basis, and any growth or shrinkage applied.

Grid containers with grid-template-areas show named area overlays. Each named region is labeled and color-coded. This visual makes it easy to verify grid-area assignments match the intended layout template.

Subgrid support in DevTools marks subgrid containers distinctly. Their track lines align with the parent grid tracks — the overlay shows this alignment visually, confirming that subgrid items participate in the parent grid's coordinate system.

Misaligned items often result from wrong justify-content, align-items, or align-self values. The flex/grid overlay shows item positions relative to axis lines. Try toggling alignment properties in the Styles panel and observe overlay changes in real time.

The overlay renders gap spacing as colored bands between items. This makes it easy to confirm gap values and identify whether spacing comes from gap (correct) or from margin (which may collapse unexpectedly in flex rows).

Grid overlay differentiates implicit tracks (auto-created for overflow items) from explicit tracks (defined in grid-template). Dashed lines mark implicit tracks. If content creates unexpected implicit tracks, the overlay reveals the overflow pattern immediately.

Combine the Layout Inspector with Device Mode. Resize the viewport and watch how flex wrap and grid auto-fill/auto-fit tracks reflow in real time. This catches responsive layout breaks earlier than resizing a browser window manually.

What does the DevTools grid overlay show that is not visible in the rendered page?

The DevTools Flexbox and Grid Layout Inspector visualizes axis lines, track sizes, gap spacing, named areas, and implicit tracks as interactive overlays. Combined with the Layout panel for overlay management, it makes debugging complex CSS layouts faster and more intuitive than reading CSS alone.