Modern CSS Layouts That Just Work

.layout {
  display: grid;
  grid-template-columns:
    1fr min(65ch, 100%) 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}

CSS has come a long way. Between Grid, Flexbox, and newer primitives like clamp(), aspect-ratio, and container queries, we can build layouts that are both robust and blissfully simple.

In this guide, I’ll walk through the patterns I reach for most often, with copy–pasteable examples and tiny demos you can tweak.

1. The building blocks

Modern layouts are usually a combination of just a few primitives:

• Grid for two-dimensional page structure
• Flexbox for one-dimensional alignment
• minmax(), clamp(), and relative units for fluid sizing
• Container queries for component-level responsiveness

2. A centered page layout with CSS Grid

This is my default page wrapper. It creates a centered content column with comfortable side space on large screens.

.page {
  --content-max: 65ch;
  display: grid;
  grid-template-columns: 1fr min(var(--content-max), 100%) 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
  padding-block: clamp(2rem, 6vw, 6rem);
}

3. Real-world pattern: media object

Use Grid to align media and content without extra markup or hacks.

.media {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}

<div class="media">
  <img src="avatar.jpg" alt="" />
  <div>
    <h3>Clean layout, happy dev</h3>
    <p> Grid handles the hard
    parts so you can focus. </p>
  </div>
</div>

That’s it. No clearfixes, no magic numbers.