0Pricing
CSS Academy · Lesson

min() max() and clamp() for Fluid Values

Constrain values between minimums and maximums using min(), max(), and the clamp() shorthand.

min() max() and clamp() for Fluid Values is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Comparison Functions?

CSS comparison functions (min(), max(), clamp()) enable responsive sizing that adapts to context without media queries — more elegant and concise than breakpoint-based approaches.

min() — Pick the Smallest

min(a, b, ...) evaluates all arguments and uses the smallest. The "minimum" here is the visual result — meaning the most constrained option.

.container {
  width: min(1200px, 100%);
  /* 1200px on large screens, 100% on small (never wider than 1200px) */
}

max() — Pick the Largest

max(a, b, ...) picks the largest value — ensuring a minimum floor is always met.

p {
  font-size: max(14px, 1vw);
  /* never smaller than 14px, grows with viewport */
}

clamp(min, preferred, max)

clamp() constrains a value within a range. The preferred value (middle argument) is typically fluid. The min and max provide absolute bounds.

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  /* min 1.5rem, preferred 5vw, max 3rem */
}

clamp() Fluid Typography Scale

Replace multiple breakpoint overrides with a single clamp() per heading level:

h1 { font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw + 0.75rem, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw + 0.5rem, 2rem); }

clamp() Fluid Spacing

Apply fluid sizing to padding, margin, and gap too — a key technique for "intrinsic" design:

.section {
  padding: clamp(2rem, 8vw, 6rem);
}

.grid {
  gap: clamp(1rem, 3vw, 2rem);
}

min() as a Width Guard

The cleanest container pattern: always 90% of viewport but never wider than 1200px, with one expression:

.wrapper {
  width: min(1200px, 90%);
  margin-inline: auto;
}

max() for Minimum Font Size

Ensure body text never becomes too small on small viewports:

body {
  font-size: max(0.875rem, 1.5vw);
  /* grows with viewport but never below 0.875rem */
}

Nesting min/max/clamp

These functions can be nested for complex constraints:

.element {
  padding: clamp(1rem, max(2vw, 1.5rem), 4rem);
}

Comparison Functions in Grid

Use min() inside minmax() for a safer column floor:

.grid {
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  /* prevents overflow in very small containers */
}

Browser Support

All three comparison functions have full support in modern browsers (Chrome 79+, Firefox 75+, Safari 11.1+). No vendor prefixes needed.

Quick Check

A heading uses font-size: clamp(1rem, 3vw, 2.5rem). At what viewport width does 3vw equal 1rem (assuming 16px root)?

Recap

min() picks the smaller value (upper cap). max() picks the larger (lower floor). clamp(min, preferred, max) bounds a fluid value. Together they power fluid typography and spacing without media queries. The most powerful pattern: clamp(1.5rem, 4vw, 3rem) for automatically responsive headings.

Frequently asked questions

Is the “min() max() and clamp() for Fluid Values” lesson free?

Yes — the full text of “min() max() and clamp() for Fluid Values” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “min() max() and clamp() for Fluid Values”?

Constrain values between minimums and maximums using min(), max(), and the clamp() shorthand. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “min() max() and clamp() for Fluid Values” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. calc() for Dynamic Calculations
  2. min() max() and clamp() for Fluid Values
  3. repeat() and minmax() in Grid
  4. color-mix() and relative color syntax
← Back to CSS Academy