Layout Snippets — Free HTML CSS JS Page Layout Components

83 layout components · Bento Grid, Masonry, Holy Grail, Split Panes, Timelines, Device Mockups, Code Blocks, Error Pages · Exports to React, Vue, Angular & Tailwind

What's included

Features

Page shells: holy grail, IDE three-pane, docs split-pane, collapsible and resizable sidebars
Bento grid with mixed row/column spans and a media-query-free auto-fill card grid
Masonry layouts in CSS columns and native CSS masonry, plus Muuri filterable grids
Draggable resizable split panes with minimum sizes and persisted widths
Drag-to-sort lists and image reorder grids for user-arranged content
Vertical and horizontal timelines, magazine, newspaper, and breakout article grids
Code blocks with copy buttons, line numbers, tabs, and side-by-side diffs
Browser, laptop, phone, tablet, smartwatch, and TV device mockup frames
Ready-made 404, 500, coming-soon, maintenance, and empty-state page templates

About this category

Layout Snippets — Free Bento Grids, Masonry, Split Panes, Timelines, Mockups & Full Page Templates

Layout components define the structure of a page — how regions are arranged, how they resize, and how content flows between them. This collection covers the structural side of UI: page shells, grids, resizable panes, timelines, device frames, code presentation, and the full-page templates every product eventually needs, like 404, maintenance, and empty states.

Every snippet is plain HTML and CSS, with vanilla JavaScript only where the layout genuinely needs it — dragging a divider, reordering items, or persisting a width. Copy the code and drop it into any project.

Page shells. The Holy Grail Layout builds header, footer, two sidebars, and a flexible main column on a grid-template-rows: auto 1fr auto frame that keeps the footer at the bottom of short pages. The IDE Three-Pane Workspace and Sticky Split-Pane Documentation Layout show the app-style shells used by editors and docs sites, and the Collapsible Sidebar, Sticky Sidebar, and Resizable Sidebar with Persisted Width cover the side-navigation region on its own.

Grids. Bento Grid mixes cell sizes with grid-column and grid-row spans, Responsive Card Grid uses repeat(auto-fill, minmax()) to reflow without a single media query, and Masonry Grid and Native CSS Masonry Gallery handle variable-height content. The Muuri grids add filtering, sorting, and drag-to-reorder on top.

Resizable and reorderable regions. Resizable Split Pane, Drag-to-Resize Split Panels, and the Interact.js resizable panel show draggable dividers with minimum sizes, while the drag-to-sort lists and image reorder grids cover the reordering side.

Content structure. Vertical and horizontal timelines, the Magazine Asymmetric Grid, Newspaper Column Layout, Breakout Grid Article Layout, pull quotes, and footnote previews shape long-form reading pages. Code blocks, code tabs, diff viewers, and a live code playground cover technical content.

Device mockups and full pages. Browser, laptop, phone, tablet, smartwatch, and TV frames present screenshots in context, and the 404, 500, coming-soon, maintenance, and empty-state templates cover the pages people only notice when they are missing.

Real-world uses

Common Use Cases

App shells for dashboards, editors, and docs
Start from the Holy Grail, IDE Three-Pane, or Sticky Split-Pane layout when a product needs persistent navigation plus a main working area, and add a resizable sidebar when users should control the balance between the two.
Feature sections and portfolio grids
Bento Grid for mixed-size feature highlights, Masonry for photography and design work with variable heights, and the Muuri grids when visitors should filter or rearrange the items themselves.
Technical content and developer docs
Code blocks with copy buttons and line highlighting, multi-tab code samples, and diff viewers for documentation, tutorials, changelogs, and API references.
Error, empty, and maintenance states
Drop-in 404, 500, maintenance, coming-soon, and empty-state templates so the pages people hit when something is missing still guide them somewhere useful.
Learning modern CSS layout
Each layout isolates one technique — auto-fill with minmax(), grid row templates, CSS columns with break-inside, sticky positioning, or drag-to-resize — that you can lift into any other page.
Screenshots presented in device frames
Browser, laptop, phone, tablet, smartwatch, and TV mockups put product screenshots in context on landing pages, case studies, and app store style showcases.

Got questions?

Frequently Asked Questions

grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) lets the browser place as many 220px-minimum columns as fit, and stretches them to fill the row. As the container narrows, columns drop one at a time down to a single column, with no breakpoints and no JavaScript.

The columns-based masonry splits the container into equal-width columns and flows items top to bottom, with break-inside: avoid keeping each card whole. The native masonry snippet uses grid-template-rows: masonry in browsers that support it. Both let short and tall items sit together without row gaps.

Pressing on the divider starts a drag; move events on the document convert the cursor position into a width for the first pane, clamped to a minimum and maximum, and releasing ends it. The Resizable Sidebar with Persisted Width uses pointer events with setPointerCapture so the drag survives the cursor leaving the handle, and saves the final width to localStorage.

Hero sections now live in the Heroes category, and before/after image comparison sliders live in Media & Galleries, alongside the other image viewers. Layouts focuses on structural page regions and full-page templates.

Yes. Every layout has JSX, Vue, and Angular exports. Pure CSS layouts convert directly; layouts with dragging or resizing move their listeners into useEffect (or onMounted) and clean them up on unmount.