Switcher utility

Quick implementation

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, 1rem);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building responsive layouts
without media queries.

Goal: A "switcher" layout utility that places its children side by
side when the container is wide enough, and stacks them vertically
when it is not — all via a single calc() trick, no media queries.

Technical constraints:
- Use display: flex and flex-wrap: wrap on the container.
- Give every direct child flex-grow: 1 and flex-basis calculated
  as: calc((var(--switcher-threshold, 30rem) - 100%) * 999)
  The large multiplier (999) amplifies the sign of the result so
  the basis is either a very large positive number (triggering
  wrap) or a very large negative number (which clamps to 0,
  allowing side-by-side layout).
- Expose --switcher-threshold and --switcher-gap as CSS custom
  properties with sensible defaults (30rem and 1rem).
- Use oklch() for any colors — no hex or rgba values.
- Use CSS custom properties (var(--card), var(--text), etc.) for
  theming.

Framework variant (pick one):
A) Vanilla CSS utility class .switcher with a data attribute
   data-threshold="40rem" that sets --switcher-threshold inline.
B) React component — accept threshold (string, default "30rem"),
   gap (string, default "1rem"), and children props; apply the
   flex layout via inline style on a wrapper div.

Edge cases to handle:
- If children have a min-width set, the switcher may not wrap as
  expected — remove or reduce min-width on children, or adjust
  the threshold accordingly.
- More than two children all share the same threshold, so they all
  wrap or unwrap together; to control individual items, nest
  switchers.
- In very narrow containers the negative flex-basis clamps to 0,
  so add a min-width: 0 guard on children to prevent overflow.

Return CSS only (or a React component if variant B is chosen).

How the calc() trick creates a content-based breakpoint

The switcher relies on a single mathematical insight: subtract the container's current width (100%) from the threshold value, then multiply the result by a huge number. When the container is wider than the threshold, threshold - 100% is negative. Multiply by 999 and the result is a massively negative number — CSS clamps flex-basis at zero, so each child takes up a proportional share of the row and they sit side by side.

When the container is narrower than the threshold, threshold - 100% is positive. Multiply by 999 and flex-basis balloons to a very large positive value — larger than the container itself. flex-wrap: wrap forces every child onto its own line, producing a stacked column layout.

The flip happens at exactly the threshold value, with no media query involved. Because the comparison is against the container width rather than the viewport, the switch responds correctly when the component is placed inside a narrow sidebar or a wide main area — something viewport media queries cannot achieve without container queries.

Why the 999 multiplier?

The multiplier just needs to be large enough that the resulting positive flex-basis exceeds any realistic container width, forcing a wrap. A value of 999 comfortably covers containers up to 999 times the threshold — effectively unlimited for practical layouts. Some implementations use 9999 for extra headroom. Either works; the browser clamps the negative case to zero automatically.

Choosing a multiplier that is too small would cause the layout to break at very wide containers where a still-positive-but-small basis might allow multiple items onto a row when they should have wrapped. 999 is the conventional choice from the original Every Layout specification, and has proven reliable in production.

Customising the threshold

Because the threshold is a CSS custom property (--switcher-threshold), you can override it per instance without writing a new utility class. Set it inline on the element or in a scoped selector:

<div class="switcher" style="--switcher-threshold: 40rem;">
  <!-- switches at 40rem instead of 30rem -->
</div>

Adjust --switcher-gap the same way. Because both properties cascade normally, you can also set them on a parent element to apply the same threshold to a whole section without touching individual switcher instances.

For designs that need items to switch at different widths, nest switchers. An outer switcher controls the top-level columns; an inner switcher, with its own threshold, controls a sub-group of items independently.