The Grid component implements a simple CSS grid with auto-fit columns

The gap prop specifies the distance between items in the grid using the theme's space scale and the minItemSize prop specifies, in any valid CSS units, the minimum size of each grid item.

Note: Passing percentage values into minItemSize will result in unintuitive behaviour. E.g. minItemSize="50%" will result in only one item per row because 50% width + any gap between the items means the total width of the row will be 50% + 50% + gap which will wrap the second item onto the next line.

<Grid minItemSize="10em" gap="3" css={{ width: '100%' }}>
{Array.from(Array(6)).map((_, i) => (
<Box key={i} css={{ bg: '$primary', height: '10em' }} />
))}
</Grid>

Should you need further control of the size of grid items, you can pass maxItemSize, which accepts the same value types as minItemSize. This is useful when you wish to control the width of items that may or may not fill the container width based on content, so they do not stretch to fill the width.

<Grid minItemSize="10em" maxItemSize="10em" gap="3" css={{ width: '100%' }}>
{Array.from(Array(3)).map((_, i) => (
<Box key={i} css={{ bg: '$primary', height: '10em' }} />
))}
</Grid>

API Reference

PropTypeDefaultRequired
gap
number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
2

-

cssCSSProperties

-

-

minItemSize
string

-

-

maxItemSize
string
1fr

-