css bento grid
All collections tagged with "css bento grid"
6 CSS Bento Grid Layouts
6 production CSS bento grid layouts with 12 hand-coded designs — Apple-style product showcase, SaaS feature value-prop matrix, analytics dashboard overview, creative portfolio, e-commerce category hub, and link-in-bio social hub. Each topic ships 2 sub-variants side-by-side so visitors see both a keynote aesthetic and a paper-doc variant at once. Container queries, CSS Grid, zero dependencies, copy-paste ready.
15 CSS Card Grid Layouts
15 production CSS card grid layouts covering the most-searched grid patterns plus originals built for real use cases — auto-fit responsive blog archive grid, asymmetric bento-box feature grid, equal-height product grid, fluid Pinterest-style masonry, team directory face grid, 3D hover-flip card grid, stratified duotone bento, editorial tabloid bento with masthead and TOC, use-case showcase grid, SaaS pricing comparison with featured tier, Vercel-style testimonial wall with featured 2x2, Airbnb-style hero photo collage with location pills, SaaS stats dashboard with CSS-bar sparklines, editorial featured-article magazine grid with category-coded pills, and a Liquid Glass bento grid with per-tile refraction rims (Apple iOS 26 / macOS Tahoe aesthetic). Every layout scoped under .cg-NN, zero dependencies, copy-paste ready.
17 CSS Dashboard Layouts
17 hand-coded CSS dashboard layouts covering the exact patterns SaaS builders, admin-panel devs, fintech UI teams and analytics-tool designers actually ship: modern CSS Grid bento dashboards, collapsible-sidebar admin shells, auto-fit KPI card grids, split-pane master-detail views, fixed-header independent-scroll panels, grid-template-areas boilerplates, off-canvas drawer dashboards, container-query responsive widgets, e-commerce merchant control panels, dark-mode CSS-variable systems, multi-level nested sidebars, zero-dependency vanilla shells, AI copilot split layouts, sticky-header + sticky-column data grids, modular masonry boards, 100vh no-scroll command centers, and horizontal top-nav app frames. 14 truly Pure CSS + 3 with a tiny optional vanilla JS snippet. Every dashboard is scoped under a unique .cdl-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards on every animation, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
30 CSS Grid Layouts
30 hand-coded CSS grid layouts — full-bleed article, sticky sidebar, responsive media gallery, modern holy grail, dynamic data grid, card stack overlay, plus 24 field-tested patterns (12-column, bento, magazine editorial, RAM auto-fit, quantity queries, Pinterest masonry, subgrid, dashboard, pricing, kanban, container queries, and more). Pure CSS, semantic HTML, RTL-ready via logical properties, copy-paste.