Bento Grid

A layout primitive that arranges child elements into a responsive, masonry-style grid.

With specific rows

With specific columns

Customizing

globals.css


:root {
  --ex-bento-grid-gap-x: calc(var(--spacing) * 2);
  --ex-bento-grid-gap-y: calc(var(--spacing) * 2);
 
  --ex-bento-grid-min-child-width: 0;
}

API

Bento Grid

Element	Selector
`BentiGrid`	`.ex-bento-grid`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Bento Grid Item

Element	Selector
`BentiGrid.Item`	`.ex-bento-grid-item`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`