Layout & Surfaces CSS Grid Responsive Layout Asymmetric Spans Tailwind v4

Bento Grid

Modern modular 12-column asymmetric bento box layout with spotlight card glow, metric widgets, and responsive auto-fitting.

Interactive Preview

Live Edit & Viewport Resizer

Variants:

Installation

Add the Bento Grid component to your project via CLI:

terminal bash

npx plain-ui add bento-grid

Features

✓ Flexible 12-column CSS Grid architecture with md:col-span-8 and md:col-span-4 ratios
✓ Spotlight hover glow and gradient edge borders
✓ Embedded live metric chips and activity stream cards
✓ Clean mobile, tablet, and widescreen responsiveness

Variants & Examples

3-Column Compact Bento

Symmetric 3-column bento showcase for features.

bento-grid-3-column-compact-bento.html html

<div class="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-4xl mx-auto p-4">
  <div class="p-5 rounded-xl bg-zinc-900 border border-zinc-800 text-white space-y-2">
    <div class="w-8 h-8 rounded-lg bg-blue-500/20 text-blue-400 flex items-center justify-center text-sm font-bold">⚡️</div>
    <h4 class="text-sm font-semibold">Lightning Fast</h4>
    <p class="text-xs text-zinc-400">Zero runtime bundle overhead with pure HTML5 primitives.</p>
  </div>
  <div class="p-5 rounded-xl bg-zinc-900 border border-zinc-800 text-white space-y-2">
    <div class="w-8 h-8 rounded-lg bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-sm font-bold">🛡️</div>
    <h4 class="text-sm font-semibold">Accessible First</h4>
    <p class="text-xs text-zinc-400">WAI-ARIA compliant keyboard navigation out of the box.</p>
  </div>
  <div class="p-5 rounded-xl bg-zinc-900 border border-zinc-800 text-white space-y-2">
    <div class="w-8 h-8 rounded-lg bg-purple-500/20 text-purple-400 flex items-center justify-center text-sm font-bold">🎨</div>
    <h4 class="text-sm font-semibold">Tailwind v4 Native</h4>
    <p class="text-xs text-zinc-400">Modern utility CSS with CSS variables and dark mode.</p>
  </div>
</div>

Attributes & Classes

Attribute / Prop	Type	Default	Description
grid-cols-1 md:grid-cols-3	class	-	Grid column definition for responsive breakpoints.
md:col-span-2	class	-	Spans across 2 columns on desktop.

Accessibility & Keyboard Navigation

• Logical DOM structure ensures natural screen reader reading order.

← Dock Accordion →