Build in responsive breakpoints

[azz]

Currently in order to be responsive to device width, you must change the columns prop of the <Grid /> component based on the width yourself.

We could add an API to specify breakpoints, that might look something like:

<Grid columns={[
  2,
  ["(min-width: 400px)", 3],
  ["(min-width: 800px)", 4]
]}>
  <Cell>A</Cell><Cell>B</Cell>
  <Cell>C</Cell><Cell>D</Cell>
</Grid>

This way we could use efficient @media rules rather than observing onresize events.

[azz]

Actually, perhaps a better route would be to implement a more traditional fixed number of columns withe the cell width being dynamic instead. This is due to display: grid behaving quite strange when you reduce the number of grid-template-columns to lower than the largest span X.

Perhaps:

const breakpoints = {
  phone: 0,
  tablet: 320,
  medium: 768,
  large: 1024
};

<Grid columns={12} breakpoints={breakpoints}>
  <Cell width={{ phone: 1, tablet: 2, large: 3}}>A</Cell>
</Grid> 

[azz]

Otherwise there's the tried and tested xs, sm, md, lg method.

<Grid columns={12} breakpoints={{ sm: 320, md: 480, lg: 520 }}>
  <Cell width={{ xs: 12, sm: 4, md: 2, lg: 1 }}>A</Cell>
</Grid>

[azz]

Thinking it might be better to expose grid-template-columns directly, so it can be set to repeat(auto-fit, minmax(100px, 1fr)). Maybe a useful abstraction can be built on top of this.

[azz]

Done in #17

[joshuabaker]

@azz Please can we reopen this. There’s a lot that’s not achievable using grid-template-columns alone.

Below is a scenario that I’m tackling.

As far as I know, this is impossible to do with grid-template-columns. It’s necessary to change that rule on specific device sizes.

Using something like the styled-components-breakpoint this can be made into a responsive property.

const MyGrid = styled(omitProps(Grid, ['columns']))`
  ${({ columns = 12 }) => map(columns, value => `grid-template-columns: ${frGetter(value)}`)}
`

render => (
  <Grid columns={{ 'xs': 6, 'sm': 12 }}>
    ...
  </Grid>
)

Let me know what you think.

[neginqantas]

Can you please add an example or provide documentation for this feature?

[hellsan631]

This worked for me:

import styled, { css } from 'styled-components'
import { Grid, Cell } from 'styled-css-grid'
import { map } from 'styled-components-breakpoint'

export const frGetter = (value) => typeof value === 'number' ? `repeat(${value}, 1fr)` : value

export const ResponsiveGrid = styled(({ columns, ...rest }) => <Grid {...rest} />)`
  ${({ columns = 12 }) => map(
    columns,
    (value) => css`grid-template-columns: ${frGetter(value)};`,
  )}
`

export const ResponsiveCell = styled(({ width, ...rest }) => <Cell {...rest} />)`
  ${({ width = 1 }) => map(
    width,
    (value) => css`grid-column-end: span ${value};`,
  )}
`

Usage (you will need a styled components theme provider for styled-components-breakpoint):

<ResponsiveGrid columns={{ xs: 1, sm: 2 }}>
  <ResponsiveCell>1</ResponsiveCell>
  <ResponsiveCell width={{ xs: 1, sm: 2 }}>2</ResponsiveCell>
</ResponsiveGrid>

A couple things to note:
styled(({ width, ...rest }) => <Cell {...rest} />)
Make sure not to pass the modified props width to the Cell component, which we want to use the styled-components-breakpoint map function on.