Flagship Design Hub

Layout & Grid Design Hub

Master modern Bento Box layout composition, 12-column responsive CSS Grid tracks, column overlay guides, and 8px baseline spacing token scales.

Apple-Style Bento Grid Builder 8px Baseline Spacing Engine Column Overlay Guides

Interactive Layout & Grid Studio

Configure column spans, gutter gap sizes, container width, column overlay guides, and export CSS Grid or Tailwind v4 tokens.

Grid & Canvas Settings

Customize columns, gutters, container width, and card spans.

Column Count

Gutter Width: 24px

Container Max Width: 1280px

Container Padding: 24px

Bento Cards (5)

Generative AI EngineSpan 8 cols

99.99% UptimeSpan 4 cols

12ms LatencySpan 4 cols

Developer SDKsSpan 6 cols

SOC-2 Type IISpan 6 cols

Interactive Canvas Preview

Responsive preview simulating a 12-column grid container.

12 Columns | 24px Gap

Generative AI Engine

Flagship

Ultra-fast vector processing with real-time inference.

span 8/12Click to focus

99.99% Uptime

Metric

Global edge network SLA.

span 4/12Click to focus

12ms Latency

Performance

Sub-millisecond cold start times.

span 4/12Click to focus

Developer SDKs

SDK

TypeScript, Python, and Rust libraries.

span 6/12Click to focus

SOC-2 Type II

Security

Enterprise security standards.

span 6/12Click to focus

Export Production Layout Code

CSS Variables & Container CSS

:root {
  --grid-cols: 12;
  --grid-gutter: 24px;
  --grid-max-width: 1280px;
  --grid-padding: 24px;
}

.bento-grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gutter);
  max-width: var(--grid-max-width);
  padding: var(--grid-padding);
  margin-inline: auto;
}

Tailwind CSS Classes

<!-- Container -->
<div class="grid grid-cols-12 gap-6 p-6 max-w-[1280px] mx-auto">
  <!-- Generative AI Engine -->
  <div class="col-span-8 row-span-2 rounded-2xl border border-default p-6 bg-elevated/40">
    <p class="font-bold">Generative AI Engine</p>
  </div>
  <!-- 99.99% Uptime -->
  <div class="col-span-4 rounded-2xl border border-default p-6 bg-elevated/40">
    <p class="font-bold">99.99% Uptime</p>
  </div>
  <!-- 12ms Latency -->
  <div class="col-span-4 rounded-2xl border border-default p-6 bg-elevated/40">
    <p class="font-bold">12ms Latency</p>
  </div>
  <!-- Developer SDKs -->
  <div class="col-span-6 rounded-2xl border border-default p-6 bg-elevated/40">
    <p class="font-bold">Developer SDKs</p>
  </div>
  <!-- SOC-2 Type II -->
  <div class="col-span-6 rounded-2xl border border-default p-6 bg-elevated/40">
    <p class="font-bold">SOC-2 Type II</p>
  </div>
</div>

Vue 3 / Nuxt Component Template

<template>
  <div class="grid grid-cols-12 gap-6 max-w-[1280px] mx-auto p-6">
    <div class="col-span-8 p-6 rounded-2xl border border-default bg-default">
      <h3 class="font-bold text-lg">Generative AI Engine</h3>
      <p class="text-sm text-muted">Ultra-fast vector processing with real-time inference.</p>
    </div>
    <div class="col-span-4 p-6 rounded-2xl border border-default bg-default">
      <h3 class="font-bold text-lg">99.99% Uptime</h3>
      <p class="text-sm text-muted">Global edge network SLA.</p>
    </div>
    <div class="col-span-4 p-6 rounded-2xl border border-default bg-default">
      <h3 class="font-bold text-lg">12ms Latency</h3>
      <p class="text-sm text-muted">Sub-millisecond cold start times.</p>
    </div>
    <div class="col-span-6 p-6 rounded-2xl border border-default bg-default">
      <h3 class="font-bold text-lg">Developer SDKs</h3>
      <p class="text-sm text-muted">TypeScript, Python, and Rust libraries.</p>
    </div>
    <div class="col-span-6 p-6 rounded-2xl border border-default bg-default">
      <h3 class="font-bold text-lg">SOC-2 Type II</h3>
      <p class="text-sm text-muted">Enterprise security standards.</p>
    </div>
  </div>
</template>

Curated Bento & Grid Layout Directory

Production-grade 12-column Bento grids, SaaS dashboards, and landing page hero layouts. Click to customize in Grid Studio.

15 Layout Presets

8col

4col

6col

Apple-Style 3x3 Bento Showcase

Bento & Cards

High-contrast 3x3 Bento Grid with a large hero feature card, stat badges, and secondary teaser cards.

#Bento #Apple UI #Feature Grid #Hero Card

8col

4col

12col

AI Analytics Dashboard Bento

Bento & Cards

Bento grid tailored for AI monitoring platforms with primary charts, token counters, and status toolbars.

#AI #Analytics #Bento #Dashboard

7col

5col

12col

SaaS 60/40 Hero Split Grid

Hero & Landing

Balanced 12-column hero split with 7 columns for headline/CTAs and 5 columns for interactive preview video/mockup.

#Hero Split #Landing Page #60/40 #SaaS

12col

4col

Full Backdrop Hero Grid

Hero & Landing

Immersive centered hero layout spanning 12 columns with floating feature badges underneath.

#Backdrop #Centered Hero #Immersive #Clean

3col

4-Column SaaS Feature Matrix

SaaS & Dashboard

Clean 4-column equal grid layout (3 cols each) ideal for displaying key product pillars side-by-side.

#4 Columns #Feature Grid #Equal Span #Product Pillars

4col

3-Column Product Value Grid

SaaS & Dashboard

High-impact 3-column feature grid (4 cols each) with generous padding for value propositions.

#3 Columns #Value Props #Feature Cards #Clean

3col

9col

App Workspace Dashboard Grid

SaaS & Dashboard

Classic 12-column web app layout with 3-column navigation sidebar and 9-column workspace canvas.

#Dashboard #Sidebar #App Workspace #3/9 Split

3col

8col

4col

Executive KPI Metrics Grid

SaaS & Dashboard

Multi-row dashboard grid with 4 top KPI summary cards and 2 large detailed data visualization panels.

#KPI Grid #Metrics #Data Viz #Executive Board

4col

3-Tier SaaS Pricing Table Grid

Forms & Split

12-column pricing matrix layout with 4 columns per tier (Free, Pro, Enterprise) highlighting the middle Pro plan.

#Pricing #SaaS #3 Tiers #High Converting

3col

5col

4col

3-Pane API Documentation Grid

Forms & Split

3-pane developer docs grid (3 cols nav, 5 cols docs, 4 cols live curl/code playground).

#API Docs #3 Pane #Developer #Code Sandbox

7col

5col

Modernist Editorial Gallery Grid

Editorial & Gallery

Asymmetric staggered grid layout tailored for editorial magazine features, fashion lookbooks, and art galleries.

#Editorial #Masonry #Asymmetric #Fashion & Art

6col

12col

Creative Agency Portfolio Grid

Editorial & Gallery

Spacious grid showcasing case studies with varying card widths (6 cols, 6 cols, 12 cols).

#Portfolio #Agency #Showcase #Case Studies

6col

Split Authentication & Checkout Grid

Forms & Split

Clean 6/6 split grid with brand testimonial sidebar on the left and form inputs on the right.

#Auth Form #Checkout #Split Grid #Conversion

8col

4col

12col

Cyberpunk Dark Neon Bento Grid

Bento & Cards

Futuristic dark-mode bento grid with neon gradient accents and high-visibility glow tiles.

#Cyberpunk #Dark Mode #Neon #High Glow

6col

Scandinavian Minimalist Monochrome Bento

Bento & Cards

Understated monochrome bento grid with muted slate borders and crisp typographic hierarchy.

#Scandi #Minimalist #Monochrome #Clean