Designing a responsive Grid with breakpoint props

What's really being asked

This checks whether you can design a declarative layout API that abstracts responsive CSS, so consumers describe intent (columns per breakpoint) rather than writing media queries themselves.

The full answer

The Grid should accept a responsive column specification, for example a columns prop that is either a single number or an object mapping breakpoints like mobile, tablet, and desktop to column counts. Internally it uses CSS Grid, setting grid-template-columns to repeat the requested count, and applies the per-breakpoint values via media queries or, better, container queries so the grid responds to its own container rather than the viewport. Expose a gap prop wired to the design system spacing scale for consistent gutters. Children are passed as-is and flow into the grid tracks, so consumers do not manage placement. The key is that all the responsive CSS lives inside the component; the consumer only declares how many columns they want at each size. Optionally support spanning by pairing with a GridItem that accepts its own breakpoint span.

The mistakes people make

Hardcoding one column count with no responsiveness. Making consumers write their own media queries, which defeats the abstraction. Using floats or manual width math instead of CSS Grid. Tying gap to arbitrary pixels instead of the spacing tokens.

What usually comes next

Container queries versus viewport media queries, and when each is appropriate. How do you support items that span multiple columns? How do you keep generated CSS small with many breakpoints?

A concrete example

A consumer writes Grid with columns set to one on mobile, two on tablet, and four on desktop, plus a gap token of md. The component emits CSS Grid rules that switch grid-template-columns at each breakpoint, and the children reflow from a single column on phones to four across on desktop, with the consumer never touching a media query.