Bento Grid

Bento Grids are designed for complex, non-linear layouts. Built on a 12-column grid with grid-auto-flow: dense , they allow items to "pack" into empty spaces automatically using span utilities.

Basic Bento

3-Column Bento

A simple layout where items use mixed spans to create a balanced composition.

col-2

row-2

col-1

<div class="wf-bento wf-bento-cols-3 wf-gap-4">
  <div class="wf-bento-item wf-bento-col-2">Hero</div>
  <div class="wf-bento-item wf-bento-row-2">Sidebar</div>
  <div class="wf-bento-item">Box A</div>
  <div class="wf-bento-item">Box B</div>
</div>

Interactive Example

Responsive Dashboard Composition

On mobile, bento items automatically collapse to full-width rows to maintain content readability.

screen

<div class="wf-bento wf-bento-row-md wf-gap-3">
  <div class="wf-bento-item wf-bento-col-8 wf-bento-row-2">Hero</div>
  <div class="wf-bento-item wf-bento-col-4">Stat A</div>
  <div class="wf-bento-item wf-bento-col-4">Stat B</div>
  <div class="wf-bento-item wf-bento-col-3">Small</div>
  <div class="wf-bento-item wf-bento-col-6">Graph</div>
  <div class="wf-bento-item wf-bento-col-3">Small</div>
</div>

Class Reference

All modifier classes available on .wf-form

Class Name	Type	Description
wf-bento	Base	Initializes the bento grid with 12 columns and dense auto-flow.
wf-bento-cols-1 ... 12	Columns	Overrides the default 12-column track count.
wf-bento-row-xs ... 2xl	Sizing	Sets the base row height (e.g., xs: 3.5rem, lg: 7rem).
wf-bento-col-1 ... 12	Span	Defines how many columns an item should span.
wf-bento-row-1 ... 6	Span	Defines how many rows an item should span.