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.
1
2
3
4
<Grid cols="3" gap="2">
<Card>
...
</Card>
...
</Grid>
Attributes
The
<Grid>
component can be customized using the following attributes.
Columns
You can set the number of columns with the
cols
attribute. Must be 1,2,3 or 4. Defaults to 1.
1
2
3
4
// [!code word:cols:1]
<Grid cols="4">
<Card>
...
</Card>
...
</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.
1
2
3
4
// [!code word:gap:1]
<Grid gap="5">
<Card>
...
</Card>
...
</Grid>