RWD Templates
Most responsive pages reuse the same handful of layout templates. Knowing the patterns saves you from reinventing them on every project.
Five layouts that cover 90% of sites
| Template | Structure | When to use |
|---|---|---|
| Single column | Hero → sections → footer. | Marketing pages, blog posts. |
| Sidebar + main | 240px sidebar, fluid main. | Docs sites, dashboards. |
| Holy Grail | Header, sidebar, main, footer. | App shells. |
| Card grid | Auto-fit grid of equal cards. | Portfolio, product listings. |
| Magazine | Mixed-size grid with a "featured" cell. | News, content-heavy home pages. |
The five-line single column
CSS
main {
max-width: 720px;
margin-inline: auto;
padding-inline: 16px;
line-height: 1.6;
}
Where the responsive magic happens
- Container with
max-widthinstead ofwidth. - Grid/flex with
repeat(auto-fit, minmax(...)). - One or two well-chosen media queries (don't over-engineer).
- Fluid type with
clamp()so headings scale.
Tip: Pick a template, get the page working at one breakpoint, then test by resizing the browser. If it doesn't break at any width between 320px and 1920px, you're done.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>RWD Templates</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Centre the main column with margin auto.
main { max-width: 720px; margin-
: auto; }
A logical-property direction — horizontal.
Discussion
Loading…