CSS Layout Generator

Mobile-first and desktop-first are not mirror images

The two strategies produce the same number of regimes from the same breakpoints — n breakpoints give n+1 regimes either way — so it looks like a pure matter of taste. It isn't. We simulated every query this page generates against every viewport width and only one of them covers the width axis exactly once.

The cause is that both min-width and max-width are inclusive. A viewport of exactly 768px matches min-width: 768px and also matches max-width: 768px, so writing both at the same number overlaps rather than divides. The standard fix, which this page uses, is to subtract a sliver and emit max-width: 767.98px. That removes the overlap — but the gap is now exactly the thing you subtracted, and no value makes it zero. That would need an exclusive bound, and media queries of this form don't have one.

That last row is the worst case: the topmost sliver of every set falls past every override and lands on the unqualified base styles, which in a desktop-first sheet are your widest layout. Across the three sets here that's 12 slivers — one per breakpoint, 2 in the simple set and 5 each in Bootstrap and Tailwind. The mobile-first output has none, anywhere: min-width alone tiles the axis exactly.

To be straight about the size of this: 0.02px is not reachable at an ordinary integer window width. You need a fractional viewport, which comes from browser zoom and from some fractional-scaling displays. So it's a real defect that's rarely hit — and still the reason mobile-first is the better default, because it's exactly right rather than nearly right, and it costs nothing.

One incidental find: the three breakpoint sets here were designed independently and agree on exactly one number. 768px is in all three, and both Bootstrap and Tailwind call it md. 1024px appears in two. Nothing else appears more than once.

On the columns tab, the count is a ceiling

The multi-column output is columns: {n} 180px — the shorthand takes a count and a minimum width, and when both are given the count is a maximum rather than a target. The browser fits as many 180px columns as the container allows, up to that number. So the slider is really asking "at most how many," and what you get depends on how wide the container is:

Each extra column costs one column plus one gap, so the steps are identical — 208px every time. In a 900px container, asking for 4, 5 or 6 all give you 4. At a 768px page width you can get 3 at most, and on a 375px phone you get one whatever the slider says. That last part is the point of writing the shorthand this way instead of as a bare count: the layout degrades on its own without needing a media query.