Bento grids
STEP 05 / LIVE EXAMPLE
Bento grids
Two CSS grids share one drag scope. Drop a tile on a cell in either grid, or use its ↘ handle to resize it. Displaced tiles preview their new cells while you drag or resize. Rocket sends every changed position on commit; the backend applies them and returns HTML. Plain arrows navigate tiles within and across grids with arrows or h/j/k/l. Focus a tile: Alt + arrows move it by a cell and cross a board boundary at an edge; Alt + Page Up/Down switches grids directly, and Shift + arrows resize. Release the modifier to commit; Escape cancels.
The browser proposes positions for its live preview. The synthetic backend checks the complete resulting grid for bounds and overlap before accepting them; a consuming backend validates its own layout rules.
Bento grids shortcuts
Focus an item first.
- ↑ ↓ ← → / h j k l
- Focus tiles, including across grids
- Home / End
- Focus first or last tile
- Alt + ↑ ↓ ← → / h j k l
- Stage a tile move; cross at an edge
- Alt + Page Up / Down
- Move to the previous or next grid
- Shift + ↑ ↓ ← →
- Stage a resize
- Release modifier / Esc
- Commit / cancel the move
Overview
Scratchpad
<rocket-bento-workspace>
<div data-bento-grid="overview" data-columns="4">
<article data-bento-item="tile-a" data-bento-col="1" data-bento-row="1"
data-bento-width="2" data-bento-height="2" tabindex="0">
Traffic <button data-bento-resize aria-label="Resize Traffic">↘</button>
</article>
</div>
<div data-bento-grid="scratchpad" data-columns="4"></div>
</rocket-bento-workspace>
rocket-bento-move → { itemId, fromGrid, toGrid, updates: [{ itemId, grid, col, row, width, height }] }
rocket-bento-resize → { itemId, grid, updates: [{ itemId, grid, col, row, width, height }] }