Grid

A layout component that helps to create simple column-based layouts as well as more complex ones.

API reference

Grid

This is the grid container component. It will help to define the number of columns that will be used in the grid. You can also define the gap between the columns. All values are responsive.

The grid component also accepts all the spacing props from the Box component.

Grid.Item

If you need more control over the columns, you can use the grid item component. This will give you access to rowSpan, colSpan, start and end. All values are responsive. This component is optional, you can use any elements directly if you prefer.

Examples

Simple grid

A simple grid with 3 columns and a gap of md.

<Grid columns={3} gap="md">
  <Box>Hello World</Box>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
</Grid>

Complex grid

You can also use the grid item to create more complex layouts. In this example the first column will span 1 column and the second column will span 2 columns.

<Grid columns={3} gap="md">
  <Grid.Item colSpan={1}>
    <Box>Hello World</Box>
  </Grid.Item>
  <Grid.Item colSpan={2}>
    <Box>Hello World</Box>
  </Grid.Item>
</Grid>

Mixing rows and columns

The grid item component also supports the rowSpan prop, which allows you to span multiple rows within the grid layout. In this example, the first item will span 2 rows to achieve a dynamic and flexible grid structure.

<Grid columns={3} gap="md">
  <Grid.Item colSpan={1} rowSpan={2}>
    <Box>Hello World</Box>
  </Grid.Item>
  <Grid.Item colSpan={2}>
    <Box>Hello World</Box>
  </Grid.Item>
  <Grid.Item colSpan={2}>
    <Box>Hello World</Box>
  </Grid.Item>
</Grid>

Responsive grid

The grid component also supports responsive values, making it easy to create responsive designs.

<Grid columns={{ xs: 1, md: 3 }} gap={{ xs: 'xs', md: 'md' }}>
  <Grid.Item colSpan={{ xs: 1, md: 2 }}>
    <Box>Hello World</Box>
  </Grid.Item>
  <Grid.Item colSpan={{ xs: 1, md: 1 }}>
    <Box>Hello World</Box>
  </Grid.Item>
</Grid>

Start and End

The start and end props can be used to position the item in the grid.

<Grid columns={3} gap="md">
  <Grid.Item start={2} end={4}>
    <Box>Hello World</Box>
  </Grid.Item>
</Grid>