HTML Layout Templates
Common page-structure patterns, built with modern CSS Grid and Flexbox. Copy a layout as a starting point for your own page.
Two-Column (Sidebar + Content)
A fixed sidebar next to a flexible main content area — the most common blog/docs layout.
Three-Column Layout
Left navigation, centre content, right rail — useful for dashboards or content with related links.
Holy Grail Layout
Header and footer span the full width, with a three-column body — a classic, flexible page skeleton.
Responsive Card Grid
A self-wrapping grid of equal-width cards — ideal for products, posts or team members.
1How To Use
Follow these steps — no coding experience needed.
- Scroll through the layoutsEach card shows a live preview next to its full code.
- Pick the closest matchChoose the structure nearest to what your page needs.
- Copy and adaptPaste the code in, then swap the placeholder boxes for your real content.
2Example Output
What this code looks like once it's on a real page.
The Holy Grail layout above is what powers most classic blogs and documentation sites — a fixed header/footer with a flexible middle that reflows for different content lengths.
3Browser Compatibility
| Browser | Support | Notes |
|---|---|---|
| Chrome | ✓ Supported | Full support |
| Firefox | ✓ Supported | Full support |
| Safari | ✓ Supported | Full support |
| Edge | ✓ Supported | Full support |
| Opera | ✓ Supported | Full support |
| Mobile browsers | ✓ Supported | Full support, iOS & Android |
Supported in every current browser — Chrome, Firefox, Safari, Edge and Opera all render this identically, on both desktop and mobile.
→Related Pages
More tools that pair naturally with this one.