Bento Grid — cinder playground

Overview

BentoGrid renders an asymmetric CSS grid mosaic where individual tiles can span rows and columns through BentoGrid.Cell (or standalone BentoCell).

Usage

<script lang="ts">
  import { BentoGrid } from '@lostgradient/cinder/bento-grid';
</script>

<BentoGrid columns={4} gap="var(--cinder-space-4)">
  <BentoGrid.Cell columnSpan={2} rowSpan={2}>Featured tile</BentoGrid.Cell>
  <BentoGrid.Cell columnSpan={2}>Secondary tile</BentoGrid.Cell>
  <BentoGrid.Cell rowSpan={2}>Tall tile</BentoGrid.Cell>
  <BentoGrid.Cell>Standard tile</BentoGrid.Cell>
</BentoGrid>

Live preview

When to use

Use when

Building feature mosaics where highlight tiles span rows or columns in a controlled layout.
Keeping bento placement declarative by pairing BentoGrid with BentoGrid.Cell or BentoCell children.

Avoid when

Packing variable-height content automatically - use masonry instead. Use Masonry instead
You only need uniform tracks without feature-tile spans - use grid instead. Use Grid instead

Examples

Asymmetric bento mosaic

BentoGrid + BentoGrid.Cell creates a deliberate feature-tile mosaic with row and column spans.

Props

Props for bento-grid
Name	Type	Default	Description
`columns`	`number`		Positive integer number of equal-width columns or a full CSS `grid-template-columns` value. Numeric values render as `repeat(<columns>, minmax(0, 1fr))`.
`gap`	`text`		Uniform row and column gap.
`rowGap`	`text`		Row gap override. Wins over `gap` for rows.
`columnGap`	`text`		Column gap override. Wins over `gap` for columns.
`collapse`	`boolean`	`true`	Enables a single-column fallback when the BentoGrid element's border-box width is 48rem or less and resets BentoCell placement to auto flow.
`as`	`NonVoidHTMLElementTagName`	`'div'`	Rendered HTML tag.
`children` required	`snippet`		Bento grid contents.