Grid

The Grid package contains a useful set of components relevant for layout work. It has helper components to create flex, as well as css-grid layouts.

import { Grid, GridItem } from "@ds-kit/grid"

Simple Example

The simplest example of a grid (using css grid) will look like this:

Column 1
Column 2
Column 3
Copy
<Grid>
  <GridItem gridColumn="span 4" bg="grey.25">
    {"Column 1"}
  </GridItem>
  <GridItem gridColumn="span 4" bg="grey.25">
    {"Column 2"}
  </GridItem>
  <GridItem gridColumn="span 4" bg="grey.25">
    {"Column 3"}
  </GridItem>
</Grid>