6 CSS Bento Grid Layouts

A bento grid layout is an asymmetric tile composition where individual cards span different numbers of columns and rows on a shared grid — usually one large feature tile paired with smaller supporting tiles, evoking the compartmentalized Japanese lunch box. The pattern broke into mainstream design via Apple's WWDC 2023 keynote slides and has since become the dominant feature-grid convention across every tier-1 SaaS marketing site: Stripe, Linear, Vercel, Notion, Framer, Cursor, Raycast, Arc Browser, Superhuman and Cron all ship bento variants on their landing pages. The reason it displaced the earlier 3-across / 4-across feature grid is compression — a bento layout communicates 6-9 discrete product benefits in the same vertical space that a traditional feature row uses for 3, without visual noise, because the asymmetry gives the eye clear entry points (the hero tile) and secondary paths (the smaller tiles). Tier-1 (US / UK / CA / AU / DE / NZ) buyers who spend their day on Apple-first devices read bento as premium; anything that still uses uniform 3-column grids reads as dated. This collection ships the 6 real-world use cases where bento wins over uniform grids: Apple-style product showcase, SaaS feature value-prop matrix, analytics dashboard overview, creative portfolio, e-commerce category hub, and mobile link-in-bio.

The recipe is three CSS declarations. First, declare the parent grid: display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(150px, auto); gap: 16px. The 12-column track is standard because it factors cleanly into 1, 2, 3, 4, 6, and 12 — every span you might want is expressible without fractional columns. Second, on the hero card apply grid-column: span 8; grid-row: span 2 to make it occupy a 2×8 area at the top-left; smaller stat cards get grid-column: span 4 and take their default single-row height. Third, on mobile swap the grid to grid-template-columns: 1fr so every tile stacks vertically full-width. That's the entire bento pattern in three rules — no grid-template-areas string needed, no JavaScript, no framework. Demo 01 (Apple-Style Product Feature Showcase) ships this exact recipe with a conic-gradient border sweep on hover using registered @property --a (Chrome 85+, Safari 16.4+, Firefox 128+). For sites that need to support pre-container-query browsers, swap @container (max-width: 880px) for @media (max-width: 880px) — the inner rules are identical.

SaaS marketing pages (Stripe / Linear / Vercel / Notion / Framer / Superhuman / Cursor / Raycast) — Topic 02 (SaaS Feature Value-Prop Matrix) is the canonical feature-grid pattern with one large core-feature block, a real-time activity block, and smaller integration + testimonial + pricing tiles. Variant A adds the Linear-style cursor-tracked spotlight border; variant B is pure-CSS with a living animated bar chart and scrolling activity feed. This is a VERY HIGH tier CPM vertical ($15-25 CPM on tier-1 devices) — SaaS pricing / feature-matrix keywords consistently outperform generic tech keywords. Product-launch pages (Apple / Rabbit / Humane / Ledger / Framework laptops / Playdate) — Topic 01 (Apple-Style Product Feature Showcase) is the keynote-slide bento with a large hero cell for the product story flanked by 1×1 stat cards with oversized numerals. Analytics dashboards (Amplitude / Mixpanel / Vercel Analytics / Linear Insights / Grafana / Sentry) — Topic 03 (Analytics Dashboard Overview) is the application-dashboard bento with a wide line graph, a single-number KPI widget, a recent-activity list and a quick-actions block. E-commerce category pages (Shopify / BigCommerce / WooCommerce / Etsy / Amazon / Farfetch) — Topic 05 (E-commerce Bento Category Hub) is the retail bento replacing boring row-and-column product listings: a New Arrivals image spanning two rows vertically, a horizontal sale banner with animated gradient, and square blocks for trending categories with image zoom. Also a VERY HIGH tier CPM vertical ($15-25 CPM). Portfolio / personal sites — Topic 04 (Creative Portfolio Bento Grid) is the one-screen resume for designers and frontend engineers with profile card, case-studies block, live clock + location widget, social links square and skills marquee. Creator economy / mobile link hubs (Linktree / Beacons / Bio Sites / Milkshake) — Topic 06 (Link-in-Bio Social Hub) is the mobile-first pure-CSS bento mimicking iOS home-screen widgets with a working dark-mode toggle built via :has() and zero JavaScript. Every topic is hand-coded CSS — copy the HTML + CSS panels, drop them into any stack, ship.

Three disciplines apply everywhere. First, layout reservation — every grid reserves its final track structure before any card animates so Cumulative Layout Shift stays 0. Cards that animate their appearance on hover animate transform, opacity, and filter only — never width, height, margin, or padding in the containing-block sense — because those trigger the layout + paint pipeline on every frame and destroy Interaction to Next Paint scores on mid-tier mobile hardware. Second, container queries over media queries — every topic uses container-type: inline-size on the section root and @container rules to switch spans. The advantage over @media is that the layout responds to the grid's OWN width, not the viewport, so the same bento drops into a narrow sidebar without breaking. Chrome 105+, Safari 16+, Firefox 110+ support this natively — for older browsers the @container rules degrade to viewport-based @media queries with a 1-line swap documented in every demo's customization notes. Third, GPU-composited borders — the conic-gradient border sweep uses a registered @property --a angle driving a ::before ring cut into a 1px frame with mask-composite: exclude. It's pure compositor work: no layout, no paint of the underlying tile, only the ring texture rotates. On a mid-tier Android device this stays well under Google's 200ms INP threshold even with all 6 topics rendering on one gallery page.

Three practices apply to every variant. Semantic markup — every topic is a real <section aria-labelledby> with a single <h2> per section and <article> for individual tiles. Interactive tiles use real <a> for navigation and real <button> for actions — not <div role='button'>. That means screen readers announce landmark structure correctly, TAB order follows DOM order (which follows visual reading order because the grid is defined by CSS spans over the natural DOM sequence), and every focusable tile ships a :focus-visible ring at 3px outline with 3px offset — the WCAG 2.4.7 requirement most bento templates skip. Second, motion — every animated variant respects @media (prefers-reduced-motion: reduce) with an appropriate calm-down block: the hover border sweep stops rotating, cursor-tracked spotlights disable pointer-following, and the sale-banner gradient animation freezes. Third, contrast — text sits on solid tile backgrounds (never on a translucent surface where the underlying content dictates contrast), and hero-tile display type stays above WCAG 1.4.3 AA (4.5:1 for normal, 3:1 for large). Every touch target hits the WCAG 2.5.5 44×44px minimum, so bento tiles remain usable one-handed on mobile. This is the accessibility floor Section 508 (US federal procurement), EN 301 549 (EU / DE public sector), AODA (Ontario), DDA (Australia), and the European Accessibility Act (June 2025) all require.

The advanced primitives cluster in modern engines but every demo carries an @supports fallback so older browsers get a working version, not a broken one. Container queries (@container) — Chrome 105+, Safari 16+, Firefox 110+. Every topic uses container-type: inline-size so grids reflow by their own width instead of the viewport. Browsers without container query support fall back to viewport-based @media queries — the inner rules are identical, only the container name changes. Registered @property typed custom properties — Chrome 85+, Safari 16.4+, Firefox 128+. Used in Topic 01 (conic border sweep angle) and Topic 04 (cursor spotlight position). Without @property support the border ring still renders — it just doesn't rotate. :has() — Chrome 105+, Safari 15.4+, Firefox 121+. Used in Topic 06 (Link-in-Bio) to drive the dark-mode toggle state from a sibling checkbox without JavaScript. mask-composite: exclude for the border-ring pattern — Chrome 120+ standardized, Safari 15.4+, Firefox 120+. The one-line fallback is a solid border. backdrop-filter — Chrome 76+, Safari 14+ (with -webkit- prefix), Firefox 103+. Every glass surface includes the -webkit-backdrop-filter fallback. Tier-1 (US / UK / CA / AU / DE / NZ) traffic on evergreen browsers gets the full experience; the long tail on IE-era enterprise browsers gets the graceful degrade.

Four honest trade-offs. Bundle cost — shadcn bento, Aceternity UI, Magic UI, ReactBits, and Tremor's dashboard components all ship as React components on top of Framer Motion (60KB+ once you include React DOM), Radix UI primitives (~40KB), and their own utility CSS. That's ~120-150KB gzip just to render a bento grid. Every topic in this collection is either 100% pure CSS (3 of 6) or CSS + under 60 lines of vanilla JavaScript (3 of 6) — total collection under 20KB uncompressed of framework-free code. Framework lock-in — shadcn requires React + Radix + Tailwind + a specific project structure. Aceternity requires React. Tremor requires React. These 6 topics are framework-agnostic — the HTML + CSS + JS panels drop into any stack (Astro, Next.js, SvelteKit, Vue, plain HTML, Ruby on Rails ERB, Django templates) with zero adaptation. Tailwind's own grid utilities (grid grid-cols-12 gap-4) are excellent and this collection's demos map cleanly to Tailwind arbitrary values — but they don't ship the bento composition itself; you still have to write the span logic per tile. License and cost — Aceternity Pro is $299+/year for their full bento collection. Magic UI Pro is a subscription. shadcn is free but ties you to their dependency tree. Every demo here is MIT licensed, free forever, no attribution required (though a link back is always appreciated). Accessibility floor — many React bento libraries treat semantics as an afterthought. Every demo here ships with keyboard navigation, focus-visible rings, aria-current / aria-live where state changes, aria-label on icon-only controls, prefers-reduced-motion guards, and passes WCAG 2.2 SC 1.4.3 AA on realistic content. If you're already on React and don't need the accessibility floor or the zero-bundle guarantee, Aceternity is a reasonable choice for prototyping. This collection specifically serves the case where you want the bento aesthetic without the React wrapper, without the subscription cost, and without the WCAG shortcuts.

Yes on both. Every topic is MIT licensed — free for personal and commercial projects, no attribution required (though a link back to codefronts.com is always appreciated). Every demo is plain HTML + CSS + optional vanilla JS with no build step, no framework wrapper, no dependencies. Drop the HTML into a React component's JSX (with className instead of class), a Vue single-file component's template, a Svelte component, an Astro island, or a SvelteKit page — the CSS ships as a scoped module, an inline <style> block, or a Tailwind arbitrary-value paste. Server-side rendering — every demo renders correctly on the server without hydration flash. Topics that ship with vanilla JS handlers (Topic 02 cursor spotlight, Topic 03 dashboard interactions, Topic 04 portfolio widget) use plain event listeners with AbortController for cleanup or are pure event delegation — safe for React StrictMode double-mount. Content-Security-Policy — demos with strict CSP (script-src 'self' without 'unsafe-inline') work by default because no demo uses inline onclick handlers; the JS runs from external files that the CSP allowlist can permit. Vue 3 v-model bindings work on the demos with form controls (link-in-bio dark-mode toggle, e-commerce filters). Angular, Blazor, HTMX, Turbo, Rails ERB, Django, and Laravel Blade all work — the HTML + CSS + JS is framework-agnostic. If you're on Tailwind, the CSS ports cleanly: grid-cols-12, col-span-8, row-span-2, gap-4, and arbitrary values like [grid-template-columns:repeat(12,1fr)] cover most of the utility mapping; SVG filters, container queries, and named keyframes belong in tailwind.config.js under extend.keyframes + extend.animation.