Spatial arrangements that structure content—bento grids, dashboards, holy grail, magazine layouts. 11 foundational layout patterns for establishing hierarchy and visual flow.
Layout patterns define the spatial structure of your interface. These 11 patterns include bento grids, hero sections, sidebars, dashboards, masonry, split screens, card grids, holy grail, magazine, floating, and terminal layouts. Each serves different content types and user goals—dashboards for data scanning, magazine for storytelling, terminal for developer tools. Choose based on content density, information hierarchy, and primary user tasks.
Bento layout arranges content in asymmetric grid boxes—mixed sizes, card-based, masonry-style. Popular in modern landing pages and dashboards for visual hierarchy.
Hero section is prominent above-the-fold content—large headline, supporting copy, CTA, visual. Essential first impression for landing pages and marketing sites.
Sidebar layout uses vertical panel for navigation and actions—persistent access to primary features. Standard in dashboards, admin panels, and productivity tools.
Dashboard layout displays key metrics and data—cards, charts, tables in scannable grid. Essential for analytics tools, admin panels, and monitoring interfaces.
Masonry layout arranges content in columns with varying heights—Pinterest-style, no gaps. Perfect for image galleries, product grids, and content discovery.
Split screen layout divides viewport into two equal or proportional sections—left/right or top/bottom. Common in onboarding, comparisons, and before/after presentations.
Card grid layout arranges content in uniform cards with consistent sizing—rows and columns, equal heights. Standard for product catalogs, blog archives, and content libraries.
Holy Grail layout uses header, three columns (left nav, main content, right sidebar), and footer—classic web layout structure for content-rich sites.
Magazine layout uses editorial design principles—large imagery, varied typography, asymmetric composition. Perfect for storytelling, blogs, and content-focused sites.
Floating layout centers content with backdrop—modal-like but not overlay. Common in focused experiences like login, onboarding, and single-task flows.
Terminal layout mimics command-line interface—monospace font, dark background, prompt-based interaction. Popular in developer tools, admin panels, and technical products.