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	Required	Description
`columns`	`number \| string`			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 narrow-screen fallback where BentoGrid becomes a single column and BentoCell placement resets to auto flow.
`as`	`NonVoidHTMLElementTagName`	`'div'`		Rendered HTML tag.
`children`	`snippet`		req	Bento grid contents.