We want a responsive grid API that allows for an arbitrary number of breakpoints to be defined, but there's an issue with how the breakpoint extremities are treated. Given the following API:
<Grid breakpoints={[300, 600, 900]}>
<Column width={[1, 1/2, 1/4]} />
</Grid>
It's not clear what width the column has at the various breakpoints defined.
In option 1, each width w
is applied for widths up to the same-indexed n
th breakpoint value.
<Grid breakpoints={[300, 600, 900]}>
<Column width={[1, 1/2, 1/4]}>
This column has:
width=1 up to 300px,
width=1/2 up to 600px,
width=1/4 up to 900px,
but then what happens over 900px?
</Column>
</Grid>
For breakpoints [n0, n1, ..., nx]
and column widths [w0, w1, ..., wx]
, there are two possible solutions for nx
:
wx
is applied as the width for columns when the grid width exceeds breakpointnx
. This effectively makesnx
equal toInfinity
.nx
is applied as amax-width
to theGrid
CSS. This may be unexpected behaviour since all other breakpoint values are mere measures, not explicit widths.
Option 2 is almost inverse to Option 1, applying widths above the breakpoint.
<Grid breakpoints={[300, 600, 900]}>
<Column width={[1, 1/2, 1/4]}>
This column has:
width=1/4 above 900px,
width=1/2 above 600px,
width=1 above 300px,
but then what happens below 300px?
</Column>
</Grid>
For widths below the smallest breakpoint n0
, there are two possible solutions:
- Apply
w0
as the width, makingn0
redundant or effectively equal to 0 n0
is applied as themin-width
for theGrid
CSS, which may be unexpected behavior for the same reason stated in Option 1.
Option 3 involves removing the redundant values found in Options 1 and 2, which leads to inconsistent shapes for the values of the Grid
's breakpoint
and the Column
's width
.
<Grid breakpoints={[600, 900]}>
<Column width={[1, 1/2, 1/4]}>
This column has:
width=1 up to 600px,
width=1/2 above 600px,
width=1/4 up above 900px,
</Column>
</Grid>
In this option, the first value of width
is treated as a default width. An alternative API could look like this:
<Column width={{
default: 1,
breakpoints: [1/2, 1/4],
}} />