CSS Website Layout
Most websites share the same coarse layout: a header at the top, a footer at the bottom, and a main column (sometimes with a sidebar) in between. Modern CSS makes it almost a five-line job.
The classic Holy Grail
The CSS
CSS
body {
min-height: 100vh;
margin: 0;
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
@media (max-width: 700px) {
body { grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"sidebar"
"footer"; }
}
Tip: Naming areas with
grid-template-areas makes the layout self-documenting. Reorder responsive layouts by re-spelling the areas — no DOM changes needed.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>CSS Website Layout</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Place the header into the named area.
header { grid-
: header; }
A single word — what region the element occupies.
Discussion
Loading…