Flexbox and CSS grid inspector

Click any flex or grid container to see how it lays out its children as a labelled diagram, along with the layout CSS that is actually doing the work.

What it shows

When the element you select is a flex or grid container (display: flex, inline-flex, grid or inline-grid), a Layout section appears on the Element tab of the side panel. It contains a diagram and a short block of CSS.

For a flex container, the diagram shows:

• An arrow along the main axis, pointing the way items actually flow, including row-reverse and column-reverse.
• start and end labels on both axes, which swap when the direction is reversed.
• Sample items laid out with the container's real flex-wrap, justify-content, align-items and align-content. Three items for a single line, seven when the container wraps, so you can see where wrapped lines go.

For a grid container, the diagram uses the container's column count and up to three of its rows, with numbered cells placed using its justify-items, align-items, justify-content and align-content.

Below the diagram, the layout CSS is listed in a code block with a copy button. Properties left at their browser defaults are filtered out, so a flex row with no gap shows only display: flex and the properties that change something.

How to inspect a flex or grid layout

1. Open the page and start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option on a Mac).
2. Hover the container and click to lock the selection. If you land on a child item, press Alt + Shift + ↑ to step up to its parent.
3. In the side panel, find the Layout section on the Element tab.
4. Read the diagram, or copy the CSS block to reuse the layout.

Not sure which element is the container? Turn on X-Ray Mode with 2 to outline every element on the page by nesting depth, then click the wrapper you need.

How it reads the layout

Screen Ruler reads the container's computed styles, the values the browser resolved after every stylesheet and class has been applied. That keeps it honest on sites built with utility classes or CSS-in-JS, where the source CSS is hard to follow.

• Grid tracks are simplified when they repeat. If every column resolves to the same size, the template is shown as repeat(4, 280px) rather than four identical values. Mixed tracks are listed as they are.
• Track sizes are resolved values. Because they come from computed styles, 1fr and minmax() tracks appear as the pixel sizes the browser settled on at the current window width.
• Gap is included when set. Row and column gaps appear in the CSS block whenever they are not zero.
• Shadow DOM is no barrier. Containers inside web components can be selected and inspected like any other element.

What it does not cover

• The diagram is a model, not a to-scale map. It uses sample items to show direction and alignment. It does not draw the container's real children at their real sizes.
• Container properties only. Properties on individual items, such as flex-grow, order or grid-column, are not part of this section. Select the item to see its own computed CSS.
• Named areas are not drawn. grid-template-areas is not shown in the diagram, and grids with more than three rows are drawn with three.

When it is useful

• Learning how a layout is built. See at a glance whether a header uses space-between, whether a card list wraps, or how many columns a gallery grid has.
• Debugging alignment. Spot a container that is centering on the wrong axis because its direction is column, not row.
• Rebuilding a layout. Copy the trimmed layout CSS straight into your own project.
• Checking against a design grid. Pair it with the Layout Grid Overlay to compare the page's real grid with the column grid in the design.

For the rest of an element's CSS, see computed CSS, and the visualizing CSS docs have screenshots of the layout diagram. Visualize Layout is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free 7-day trial with everything unlocked, no card needed.

Common questions

How do I inspect flexbox on a website without DevTools?

Activate Screen Ruler, click the flex container, and open the Layout section on the Element tab. You get a diagram of the direction and alignment and the layout CSS with defaults removed, without opening DevTools.

How is this different from the flexbox and grid tools in Chrome DevTools?

DevTools draws overlays on the page and has editors inside the Styles pane, which is great while you are coding. Screen Ruler gives you a compact summary in the side panel: one diagram for direction and alignment, and only the layout properties that are not at their defaults, ready to copy.

Why does the Layout section not appear?

It only appears when the selected element is itself a flex or grid container. If you clicked an item inside the layout, press Alt + Shift + ↑ to move up to its parent.

Why are my fr columns shown in pixels?

The values come from the browser's computed styles, which resolve fr and minmax() tracks into the pixel sizes used at the current window width. That tells you the real column sizes on screen right now.