Bento Grid Design: 9 Ready-to-Copy Sections

The one-page mock below stitches all nine pieces into a single scrollable layout, built with the config further down, so you can watch how a big hero tile, a stat card, and a wide CTA band sit next to each other before you copy any one section on its own.

Auto-plays · click a tile to jump to its section · all nine in one zip

• 01 Bento hero (2x2 grid)
• 02 Rounded pill navbar
• 03 Core bento card grid
• 04 Icon + number feature cards
• 05 Plans sized by tier
• 06 Quote cards mixed into the grid
• 07 Wide horizontal CTA tile
• 08 Link groups as their own tiles
• 09 Radius-12 pill buttons

Each part below is cut straight out of that page, in the order it appears top to bottom: hero first, then nav, then the sections a SaaS landing page usually stacks after it.

01Bento hero (2x2 grid)

The hero splits into a tall headline tile, a small stat tile, and a plain accent block instead of one wide banner — the headline tile alone spans both rows, so it reads first. Reach for this shape on a SaaS landing page's first screen or a portfolio cover, anywhere a single flat banner would waste the extra width.

<section class="grid grid-cols-3 grid-rows-2 gap-4 py-16" style="min-height:340px">
  <div class="col-span-2 row-span-2 flex flex-col justify-center gap-4 rounded-tile bg-white p-10 shadow-bento">
    <p class="text-xs font-bold uppercase tracking-wide text-accent">Nectar</p>
    <h1 class="text-4xl font-extrabold leading-tight">Work and team, one screen</h1>
    <p class="max-w-md text-sm text-ink/70">No email required — your first workspace opens in three minutes.</p>
    <button class="w-fit rounded-pill bg-ink px-6 py-3 text-sm font-bold text-cream">Start free</button>
  </div>
  <div class="flex items-center gap-3 rounded-tile bg-white p-6 shadow-bento">
    <span class="h-3 w-3 rounded-full bg-accent"></span>
    <span class="text-sm font-semibold">Live sync</span>
  </div>
  <div class="rounded-tile bg-accent/15"></div>
</section>

02Rounded pill navbar

The whole menu sits inside one pill-shaped track, and a filled inner chip slides underneath whichever item is active instead of a plain underline. It fits a landing page's top bar and works just as well for switching tabs inside an app, since the pill shape keeps four or five items readable without a full header bar.

<nav class="mx-auto flex max-w-5xl items-center gap-4 rounded-pill bg-white/80 backdrop-blur px-3 py-2 shadow-bento">
  <span class="pl-3 font-display font-extrabold text-sm">Nectar</span>
  <div class="relative flex flex-1 rounded-pill bg-ink/5 p-1">
    <span class="absolute inset-y-1 left-1 w-1/4 rounded-pill bg-accent"></span>
    <span class="relative z-10 flex-1 text-center text-xs font-semibold py-2">Home</span>
    <span class="relative z-10 flex-1 text-center text-xs font-semibold py-2">Features</span>
    <span class="relative z-10 flex-1 text-center text-xs font-semibold py-2">Pricing</span>
    <span class="relative z-10 flex-1 text-center text-xs font-semibold py-2">Contact</span>
  </div>
  <button class="rounded-pill bg-accent px-4 py-2 text-xs font-bold text-cream">Start free</button>
</nav>

03Core bento card grid

This is the body of the whole style — four tiles with different column and row spans instead of a uniform three-column grid, so the eye lands on the tallest tile first and only then scans the smaller ones beside it. Use it for a feature showcase or a dashboard summary where one item genuinely deserves more room than the rest.

<div class="grid grid-cols-3 grid-rows-2 gap-4" style="min-height:260px">
  <div class="row-span-2 flex flex-col justify-end gap-3 rounded-tile bg-white p-5 shadow-bento hover:shadow-bento-hover transition-shadow">
    <div class="flex-1 rounded-[14px] bg-accent/10"></div>
    <span class="h-4 w-4 rounded bg-accent"></span>
    <p class="text-sm font-semibold">Fast search</p>
  </div>
  <div class="flex flex-col justify-end gap-2 rounded-tile bg-white p-5 shadow-bento hover:shadow-bento-hover transition-shadow">
    <span class="h-4 w-4 rounded bg-accent"></span>
    <p class="text-sm font-semibold">Auto sort</p>
  </div>
  <div class="flex flex-col justify-end gap-2 rounded-tile bg-white p-5 shadow-bento hover:shadow-bento-hover transition-shadow">
    <span class="h-4 w-4 rounded bg-accent"></span>
    <p class="text-sm font-semibold">Team chat</p>
  </div>
  <div class="col-span-2 flex flex-col justify-end gap-2 rounded-tile bg-white p-5 shadow-bento hover:shadow-bento-hover transition-shadow">
    <span class="h-4 w-4 rounded bg-accent"></span>
    <p class="text-sm font-semibold">Reports</p>
  </div>
</div>

04Icon + number feature cards

Each card carries one icon block and one oversized number so a reader can scan the pair of tiles at a glance without reading the label under either. It suits a strip of stats sitting right above a pricing table, or a short product overview where two or three numbers make a stronger case than a paragraph does.

<section class="flex gap-4 py-10">
  <div class="flex-1 rounded-tile bg-white p-6 shadow-bento">
    <span class="mb-2 block h-6 w-6 rounded-lg bg-accent"></span>
    <p class="text-2xl font-extrabold">12,000+</p>
    <p class="text-xs font-semibold text-ink/70">connected apps</p>
    <span class="mt-3 block h-1 w-full rounded-pill bg-accent"></span>
  </div>
  <div class="flex-1 rounded-tile bg-white p-6 shadow-bento">
    <span class="mb-2 block h-6 w-6 rounded-lg bg-accent"></span>
    <p class="text-2xl font-extrabold">99.9%</p>
    <p class="text-xs font-semibold text-ink/70">uptime</p>
    <span class="mt-3 block h-1 w-4/5 rounded-pill bg-accent"></span>
  </div>
</section>

05Plans sized by tier

The recommended plan sits in a slightly wider tile with its own badge, so a reader can tell which plan you're pushing before comparing a single feature row. It replaces a three-column comparison table on a pricing section, especially when there are only two or three tiers to show.

<div class="flex items-end gap-4">
  <div class="flex-1 rounded-tile bg-white/60 p-6 shadow-[0_6px_12px_rgba(23,20,26,.08)]">
    <p class="font-bold">Free</p>
    <p class="mt-1 text-sm text-ink/70">$0</p>
  </div>
  <div class="relative flex-[1.1] rounded-tile bg-white pt-8 p-6 shadow-bento-hover">
    <span class="absolute -top-3 left-6 rounded-pill bg-accent px-3 py-1 text-xs font-bold text-cream">Recommended</span>
    <p class="font-bold">Pro</p>
    <p class="mt-1 text-sm text-ink/70">$19 / month</p>
  </div>
</div>

06Quote cards mixed into the grid

A wide quote tile sits next to two smaller cards and a full-width star row, so reviews read as part of the layout instead of a separate carousel bolted on underneath. Mix testimonials into the grid this way alongside partner logos, where a dedicated review section would otherwise feel like an ad break.

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2 rounded-tile bg-white p-6 shadow-bento">
    <p class="text-sm font-semibold leading-relaxed">&ldquo;Onboarding time dropped by half.&rdquo;</p>
    <p class="mt-3 text-xs text-ink/60">Dana Cho &middot; Product Manager</p>
  </div>
  <div class="rounded-tile bg-white p-6 shadow-bento">
    <p class="text-sm font-semibold leading-relaxed">&ldquo;Replaced three separate tools.&rdquo;</p>
    <p class="mt-3 text-xs text-ink/60">Seoyeon Park &middot; Ops Lead</p>
  </div>
  <div class="col-span-2 flex items-center justify-center gap-1 rounded-tile bg-white p-6 text-accent shadow-bento" aria-hidden="true">
    <span>&#9733;&#9733;&#9733;&#9733;&#9733;</span>
  </div>
</div>

07Wide horizontal CTA tile

One tile stretches across the full row width, with a soft glow blurred into the corner behind the heading, so it reads as the last stop after a page full of smaller tiles rather than one more card among many. Put it right before a footer, wherever the page needs a final push toward a free trial or a sign-up.

<section class="py-10">
  <div class="relative overflow-hidden rounded-tile bg-ink px-10 py-12">
    <span class="absolute -right-16 -top-24 h-64 w-64 rounded-full bg-accent opacity-30 blur-sm"></span>
    <h3 class="relative max-w-md text-3xl font-extrabold text-cream">Bring your team in today</h3>
    <button class="relative mt-6 rounded-pill bg-cream px-6 py-3 text-sm font-bold text-ink">Start free</button>
  </div>
</section>

08Link groups as their own tiles

Every footer column gets its own faint tile instead of sitting on bare background, so the bento pattern carries all the way to the bottom of the page rather than stopping at the last content section. It works best on a multi-column footer or a sitemap-style link block, where a plain list of links would otherwise look like an afterthought.

<footer class="grid grid-cols-3 gap-4 py-10">
  <div class="rounded-tile bg-ink/[.04] p-5">
    <p class="mb-2 text-xs font-bold uppercase tracking-wide text-ink/50">Product</p>
    <p class="text-sm font-semibold">Features</p>
  </div>
  <div class="rounded-tile bg-ink/[.04] p-5">
    <p class="mb-2 text-xs font-bold uppercase tracking-wide text-ink/50">Company</p>
    <p class="text-sm font-semibold">About</p>
  </div>
  <div class="rounded-tile bg-ink/[.04] p-5">
    <p class="mb-2 text-xs font-bold uppercase tracking-wide text-ink/50">Support</p>
    <p class="text-sm font-semibold">Help center</p>
  </div>
</footer>

09Radius-12 pill buttons

The input and its submit button share the same 12px corner radius as the tiles around them, plus a matching focus ring, so a form dropped into the layout reads as one system rather than a separate widget with its own rounding. Use this pair on any email capture form or search box that sits inside a bento section.

<form class="mx-auto flex max-w-md flex-col gap-3 rounded-tile bg-white p-6 shadow-bento sm:flex-row">
  <label class="relative flex-1 rounded-[12px] bg-cream">
    <input class="w-full rounded-[12px] bg-transparent px-4 py-3 text-sm outline-none ring-2 ring-accent/40" type="email" placeholder="Email address" readonly>
  </label>
  <button class="rounded-[12px] bg-accent px-5 py-3 text-sm font-bold text-cream" type="button">Sign up</button>
</form>

The tailwind.config

Every radius, shadow, color, and gap above comes from one config file rather than from values typed straight into each class. Drop this into a project's tailwind.config.js and every tile, badge, and button on the page pulls from the same four tokens.

tailwind.config = {
  theme: {
    extend: {
      colors: {
        cream: "#fff7e6",
        ink: "#17141a",
        accent: "#2f6df6",
        line: "rgba(23,20,26,.08)",
      },
      fontFamily: {
        display: ["'Plus Jakarta Sans'", "system-ui", "sans-serif"],
        body: ["'Inter'", "system-ui", "sans-serif"],
      },
      borderRadius: {
        tile: "20px",
        pill: "999px",
      },
      boxShadow: {
        bento: "0 14px 24px rgba(23,20,26,.10)",
        "bento-hover": "0 20px 32px rgba(23,20,26,.16)",
      },
      spacing: {
        gutter: "14px",
      },
    },
  },
};

The vibe-coding prompt

Paste the config above into a project, then hand an agent a short, numbered list of rules rather than a vague "make it look bento." The fragment below is the part that keeps the result from drifting into a generic card grid — everything past it is in the zip's prompt.md.

1. Split the hero into several tiles of different sizes (a 2x2 asymmetric
   mosaic) instead of one big block. Headline + CTA on the biggest tile,
   one badge and one stat on the small ones.
2. Every card uses rounded-tile (20px) and shadow-bento. On hover, only
   shadow-bento-hover grows — nothing shifts position.
3. Background is cream (#fff7e6) alone. Cards stay white or cream; accent
   (#2f6df6) only marks what needs attention. No gradient card fills.
4. Pricing skips the comparison table — the recommended plan tile is just
   1.1x larger than the rest.

Running that exact prompt against run/010/demo/page/index.html produced the page the sections above were cut from, checked at a 1280px viewport:

Where it breaks — the traps

Bento grids fall apart the moment every tile carries roughly the same amount of content, because the size differences that make the style work stop mapping to anything — a big tile next to three equally full small tiles just reads as an uneven three-column grid with extra whitespace. The pattern also breaks under real copy: swap the two-word feature labels above for a paragraph of actual marketing text, and the small tiles either overflow their fixed height or force every other tile in that row to grow to match, which erases the size contrast the whole layout depends on. Grab the full page, all nine sections, and the config file from the archive rather than rebuilding the grid math by hand — j7zbg3ef unlocks it, typed on this page exactly as it appears, no extra spaces.

Accessibility

Contrast holds up across the set because ink (#17141a) on cream (#fff7e6) and ink on plain white both clear body-text contrast by a wide margin, and the one place color alone carries meaning — the accent-colored recommended badge in 05 — also has the word "Recommended" printed on it, so the tile still reads correctly without color vision. Motion is limited to begin with: only the hero, the pro pricing tile and its badge, and the CTA glow move at all in the demos above, and every one of those honors prefers-reduced-motion by holding still rather than looping. MDN's reference on the prefers-reduced-motion media feature covers how operating systems expose that setting to a page. The grid itself also collapses to a single column under 640px rather than shrinking tiles down to an unreadable size, which matters more for this style than for a plain stack layout since a shrunk 2x2 hero gets cramped fast.

FAQ

Does bento grid design need CSS Grid, or can I fake it with flexbox?

CSS Grid is what makes the uneven tile spans possible — grid-column: span 2 and grid-row: span 2 are what let one tile occupy the space of several without absolute positioning. MDN's guide to line-based placement covers the span syntax the core grid in section 03 is built on. Flexbox can approximate a single row of uneven widths, as sections 04 and 05 above show, but it can't span two rows the way the hero tile does.

How many tiles is too many for one bento section?

Past six or seven tiles in a single grid, most readers stop distinguishing which tile is meant to matter most, since the size contrast that carries the hierarchy gets diluted across too many competing shapes. The core grid in section 03 above stays at four for exactly that reason — three normal tiles plus one obviously bigger one still reads at a glance.

Can I use bento grid design on a page that isn't a SaaS landing page?

Yes — the pattern is really just "uneven grid with matched radius and shadow," and it works for portfolios, changelogs, and dashboard summaries as well as it works for a product landing page. The nine sections here happen to be a landing page because that's the layout most of the reference sites for this trend used, but the internal-link roundup on the design category page covers non-landing uses too, and what this site does and doesn't sell is on the about page.