Grid component

A <Grid> can be used to place elements in columns on your page. It's common to use <Grid> with either <Card> or <Box> components.

The component is responsive, which means the columns will collapse on smaller screens automatically.

Syntax

<Grid cols="3">
  <Card>
     1
  </Card>
  <Card>
    2
  </Card>
  <Card>
    3
  </Card>
  <Card>
    4
  </Card>
</Grid>

Output:

Columns

You can set the number of columns with the cols attribute. Must be 1,2,3 or 4. Default to 1.

<Grid cols="2">
  ...
</Grid>

Gap

You can increase the gap between the grid items with the gap attribute. It must be a value between 0 and 5 inclusive.

<Grid gap="4">
  ...
</Grid>