Grid

Grid is a layout component that arranges children in a responsive grid system with configurable columns and spacing.

Usage

<Grid 
  itemsPerRow={3}
  gap={4}
>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Grid>

Responsive Grid

<Grid 
  itemsPerRow={{
    base: 1,
    sm: 2,
    md: 3,
    lg: 4
  }}
  gap={4}
>
  {/* Grid items */}
</Grid>

Props

Grid accepts all styled-system props from the following categories:

• Space Props
• Layout Props
• Grid Props
• Flexbox Props

Additional Props

Prop	Type	Description
itemsPerRow	number \| ResponsiveValue<number>	Number of items per row
gap	number \| string	Space between grid items