Responsive Grids

gymnast automatically adjusts column and page width and defines media query breakpoints. allows customizing these values.

Breakpoints are determined by the displayAliases property. With them you can toggle visibility of components:

JavaScript

<Grid show="large">Visible on large screens</Grid>
<Grid show={['medium', 'small']}>Visible on medium or small screens</Grid>

And customize values depending on the matching media query:

JavaScript

<Grid
  size={{
    large: 6,
    medium: 4,
    small: 2
  }}
 margin={{
   large: 'L',
   medium: 'M',
   small: 'S'
 }}
>
  Always visible but size and margin changes depending on screen size
</Grid>

All properties except base, className and ref accept an object to customize the behavior for the matching display alias.

For instance, you can switch columns from stacked to horizontal depending on the screen size like this:

e.g. stacked / small screen

e.g. side by side / large screen

JavaScript

const size = {
  large: 4,
  medium: 4,
  small: 12
} 

<Grid size={size} />
<Grid size={size} />
<Grid size={size} />

This approach is inspired on react-responsive but it has a smaller footprint at the expense of supporting a limited set of media queries. If you want more flexibility you can use react-responsive like follows:

JavaScript

<MediaQuery minDeviceWidth={1224}>
  <Grid>Visible on desktop or laptop</Grid>
</MediaQuery>
<MediaQuery maxDeviceWidth={1224}> 
 <Grid>Visible on tablet or mobile phone</Grid>
</MediaQuery>