Auto-Fit Grid

A wide-bento layout — five broad horizontal skeleton cells (hero banner, analytics chart, KPI, feed, profile) on an asymmetric `grid-template-areas` grid that reflows from one column to a four-column wide bento, mobile-first and design-system agnostic.

A split mosaic layout — a tall main hero-detail panel, a top context strip, and a three-tile mosaic (analytics with a bottom-anchored chart, an activity feed with progress, and a captioned gallery). Skeleton-only, mobile-first, and design-system agnostic.

A nine-cell bento layout with corner-and-center emphasis — four small corner accents and four paired content cells flanking a large 2×2 central hero, plus skeleton placeholders, CSS-only dark mode, and full design-system token integration.

A tri-sidebar app-frame layout — a full-width header and footer wrap a left nav rail, a central main surface, a status strip, and a right widgets aside. Regions reflow from a single mobile column to the full three-column frame, mobile-first and design-system agnostic.

A responsive bento grid layout with asymmetric skeleton cells, dark/light theme toggle, and full design-system token integration — mobile-first and design-system agnostic.

A responsive blog article layout with navigation, hero image, article body, sidebar with TOC/tags/related posts, related articles grid, and footer — skeleton wireframe, design-system agnostic.