Flex and grid containers

Hover a flex or grid container and Nitpique draws its layout the way DevTools does, in purple: a dashed outline for the container, each item outlined, the gaps hatched, and the alignment or track lines. There is nothing to turn on. It is the quickest way to see why a row wraps, where a gap comes from, or which track an item sits in.

The Layout section

Select a flex or grid container, or an item inside one, and the Element tab gets a Layout section:

• Flex container: direction, wrap, justify-content, align-items, align-content when it wraps, the gap and how many items.
• Grid container: the columns and rows as the browser sized them (3 · 200px 340px 200px), the gap, auto-flow and alignment, the named areas and the named lines.
• Flex item or Grid item: its flex values, order and align-self, or its grid row and column and self-alignment.

Show overlay keeps a container's layout drawn while you select other things. A kept grid also shows its line numbers, columns above and rows to the left, and each named area tinted with its name. Up to six stay at once; the section says how many others are shown, with Hide all. They go when Nitpique turns off, and are left out of captures.