Layouts and text that adapt with no queries

Make the page adapt continuously rather than in steps.

What to build

Fluid type and a self-arranging grid, and a respect for reduced motion.

Requirements

h1 has font-size: clamp(1.5rem, 1rem + 3vw, 3rem).
.cards is a grid with repeat(auto-fit, minmax(180px, 1fr)) and a gap of 12px.
.layout has container-type: inline-size.
A query for prefers-reduced-motion: reduce sets transition: none on .card.

Constraints

Do not use any min-width or max-width media queries.

Example

font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);

Why it works

Each value adapts on its own at every width, and so there are no sudden jumps, and the page respects people who have asked for less motion.

Hints

Hint 1

clamp takes a minimum, a preferred value and a maximum.

Hint 2

Mix a rem part into the preferred value.

Hint 3

auto-fit with minmax needs no media query.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fluid</title>
  <style>
    h1 { font-size: clamp(1.5rem, 1rem + 3vw, 3rem); }
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
    }
    .layout { container-type: inline-size; }
    @media (prefers-reduced-motion: reduce) {
      .card { transition: none; }
    }
  </style>
</head>
<body>
  <div class="layout">
    <h1>Title</h1>
    <div class="cards">
      <div class="card">One</div>
      <div class="card">Two</div>
    </div>
  </div>
</body>
</html>

Lesson: Responsive design basics →