SimpleGrid

Equal-column responsive grid. Pass a number or a responsive object ({ sm, md, lg, xl }) — or use minChildWidth for auto-fit.

01

02

03

04

05

06

07

08

Usage

import { SimpleGrid } from '@bwo-ui/react';

<SimpleGrid columns={{ sm: 2, md: 3, lg: 4 }} gap={16}>
  {items.map((item) => <Card key={item.id} {...item} />)}
</SimpleGrid>

// or auto-fit:
<SimpleGrid minChildWidth={240} gap={16}>{...}</SimpleGrid>

Props

Prop	Type	Default	Description
`columns`	`number \| { sm?, md?, lg?, xl? }`	`1`	Equal-width columns. Responsive object opt-in.
`minChildWidth`	`string \| number`	—	Auto-fit grid with this minimum column width (overrides columns).
`gap`	`string \| number`	—	Gap between cells.
`columnGap`	`string \| number`	—	Overrides gap on x-axis.
`rowGap`	`string \| number`	—	Overrides gap on y-axis.
`as`	`ElementType`	`'div'`	Polymorphic element.