Building Responsive Layouts with Pure CSS

It has never been easier to build beautiful, responsive layouts without reaching for a CSS framework. Modern CSS gives us tools that would have seemed like magic just a decade ago.

CSS Grid for Page Layout

CSS Grid is perfect for the overall page structure — a two-dimensional layout where rows and columns work together. A typical blog layout with a main column and sidebar becomes trivial:

.layout {\n  display: grid;\n  grid-template-columns: 1fr 300px;\n  gap: 24px;\n}

Flexbox for Components

Within each grid area, Flexbox handles one-dimensional alignment. Navigation bars, card footers, button groups — anywhere you need items to line up along a single axis, Flexbox is your friend.

CSS Custom Properties

CSS variables allow you to define your design tokens once and reference them everywhere. Changing your brand colour becomes a one-line edit.

:root {\n  --color-primary: #0073aa;\n  --font-sans: system-ui, sans-serif;\n}

Together these three features cover the vast majority of layout and theming needs for a modern website — no Bootstrap, no Tailwind, no build step required.