These functions work best together. Here is a small page section built from all of them.
index.html
HTML
<style>
:root {
--space: clamp(12px, 3vw, 28px); /* fluid spacing unit */
--brand: #d94a00;
--max: 44rem;
}
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.55; }
.section { padding-block: calc(var(--space) * 2); background: #fdf2e9; }
.container { width: min(100% - 2 * var(--space), var(--max)); margin-inline: auto; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.2rem); margin: 0 0 var(--space); color: var(--brand); }
.grid { display: grid; gap: var(--space); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.card { background: #fff; padding: var(--space); border-radius: 8px; border-top: 4px solid var(--brand); }
</style>
<section class="section">
<div class="container">
<h2>Why people shop here</h2>
<div class="grid">
<div class="card"><b>Hand-picked</b><br>Every title is read first.</div>
<div class="card"><b>Fast delivery</b><br>Posted the next day.</div>
<div class="card"><b>Easy returns</b><br>Thirty days, no questions.</div>
</div>
</div>
</section>What each function does here
| Where | Function | Purpose |
|---|---|---|
--space | clamp() | One fluid spacing value used everywhere |
.section padding | calc() and var() | Twice the base spacing |
.container width | min() | Never wider than 44rem, always with gutters |
h2 size | clamp() | Fluid heading with rem in it |
.grid columns | min() inside minmax() | Never overflows on tiny screens |
Resize the Result panel and watch the spacing and columns change without a single media query.
Habits
- Put the building blocks in variables (
--space,--max) and compose them in rules. - Prefer fewer, meaningful variables over many one-offs.
- Test at both extremes: a very narrow screen (320px) and a very wide one.
info
Where this leads
Fluid sizing reduces how many media queries you need, but you will still use them for layout changes such as switching navigation. The two approaches work together.