grid-api.md

Grid Breakpoint API Dilemma

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.

Option 1

In option 1, each width w is applied for widths up to the same-indexed nth 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 breakpoint nx. This effectively makes nx equal to Infinity.
• nx is applied as a max-width to the Grid CSS. This may be unexpected behaviour since all other breakpoint values are mere measures, not explicit widths.

Option 2

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, making n0 redundant or effectively equal to 0
• n0 is applied as the min-width for the Grid CSS, which may be unexpected behavior for the same reason stated in Option 1.

Option 3

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],
}} />