Grid

This component is meant for internal use only until support becomes more ubiquitous.

The Grid component is related to the CSS Grid Layout and is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element’s children (which become Grid Items).

It uses the styled-system to take all the props for grid, space, width, minWidth and maxWidth.

Examples

Grid

<Grid gridGap={2} width="100%">
  <Grid gridGap={2} gridAutoFlow="column">
    {exampleDivs}
  </Grid>
  <Grid mt={10}>
    {exampleDivs}
  </Grid>
</Grid>