The tracks come from the container, not from the children. Equal columns are structural rather than arithmetic, and no child can widen its own track.One prop carries them. columns takes a count, a list, a written track list, or a floor; rows is the same down the page, and Cell spans and places. There are no breakpoint props anywhere in it, and this page is laid out with it.
import { Grid, Cell } from '@hanzo/ui/grid'
A count
Three equal tracks. Each is minmax(0, 1fr), never a bare 1fr — 1fr means minmax(auto, 1fr), and auto floors a track at its content, so one long word would widen its own column and narrow every sibling.
<Grid columns={3} gap="$3">
one
two
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
A list
One entry per track, in the units CSS already has. Two thirds and one third, stated rather than computed.
<Grid columns={['2fr', '1fr']} gap="$3">
2fr
1fr
A written track list
Anything CSS accepts for grid-template-columns passes through untouched, so the prop never becomes the reason to drop out of the component.
<Grid columns="repeat(3, 1fr)" gap="$3">
a
b
c
A floor, and a cap
As many equal columns as fit, none narrower than 260px, and never more than three. This is the one shape a plain track list cannot say, and the reason there are no breakpoints: it measures the COLUMN. Drag the frame and watch the count change while the window stands still.
<Grid columns={{ min: 260, max: 3 }} gap="$3">
1
2
3
4
5
6
drag the bottom-right corner
A floor wider than a phone
min(900px, 100%) is what keeps this safe below 900. A bare minmax(900px, 1fr) forces a 900px track into a 390px window and the document scrolls sideways; here it lays out one full-width track instead.
<Grid columns={{ min: 900 }} gap="$3">
wide
wide
Cells span and place
A number spans that many tracks; a string places it. col across, row down — one name per axis, because CSS already has one, and a caller never writes gridColumn by hand.