title: "Grid" slug: "/packages/grid" category: "layout" componentNames:

• "Grid"
• "GridItem"

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:

<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>