Responsive

Grids reflow with no props

<Grid />                                   {/* auto-fits at every width */}
<Grid minItemWidth="20rem" />              {/* auto-fit with a floor */}
<Grid cols={{ base: 1, md: 2, xl: 4 }} />  {/* explicit, when you want it */}

Responsive cols compile to CSS custom properties that a static stylesheet reads inside fixed breakpoints. No runtime style computation, no CSS generated at render, and identical output on server and client.

Container queries, not viewport queries

Sections and cards declare container-type: inline-size, so they respond to the space they actually occupy. A card grid inside a narrow sidebar stacks exactly as it would on a phone, even on a 27-inch display. That is something a viewport-media-query library structurally cannot do.

Breakpoints

Fixed build-time constants, because CSS cannot read a custom property inside a media condition: sm 640, md 768, lg 1024, xl 1280.

Back to the introduction