Fluid grids
Columns fit themselves to the available space using auto-fit.
A modern page is just a stack of sections — each one wrapping its content in the same container. Learn the pattern once and every page you build follows it.
Resize the window — the columns below wrap automatically. No media queries involved.
Columns fit themselves to the available space using auto-fit.
One set of CSS variables themes the entire site.
The mobile menu runs on a checkbox and :checked.
Stays put while scrolling, with a frosted-glass blur.
clamp() keeps text readable at every screen size.
Semantic tags, focus states, and readable contrast.
Notice how this grey band stretches edge to edge, but the text
stops well before the window does. That's the whole trick: the
<section> owns the background, and the
.container inside it owns the width.
Keep the two responsibilities separate and every section you add later just works. Mix them together and you'll be writing one-off paddings forever.
Vertical spacing comes from a single variable,
--section-y. Change it once and the rhythm of the
whole page tightens or loosens.
Copy this file, delete the sections you don't need, and add your own.
Start now