sidebar
Holy Grail Layout
The classic three-column layout with a fixed header and footer. Left sidebar for navigation, main content center, and a right sidebar for supplemental information.
Common structural patterns for web applications. From holy-grail sidebars to kanban boards and dashboard grids — pure CSS layout concepts ready to reference and reuse.
The classic three-column layout with a fixed header and footer. Left sidebar for navigation, main content center, and a right sidebar for supplemental information.
A KPI-driven analytics layout with metric cards at top, chart/table area below, and a collapsible sidebar for navigation between different views.
Side-by-side content panes for comparing documents, code diffs, or master-detail interfaces. Often resizable with a drag handle between panels.
A horizontal column-based layout for task management. Cards flow through stages like To Do, In Progress, and Done — popularized by Trello and Linear.
A Pinterest-inspired layout where items of varying height are packed into columns. Great for image galleries, card collections, and visual discovery feeds.
A bold hero banner section with a full-width gradient header, call-to-action, and feature cards below. The bread and butter of modern landing pages.
A settings-style layout combining a left navigation sidebar with horizontal tabs inside the main content area. Allows two levels of navigation hierarchy.
A single-column scrolling feed flanked by optional sidebars. Each feed item is a card with avatar, text, and optional media — the pattern behind social feeds and activity logs.