CSS - Functions & Math

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 12–18 minutes

Use math functions to create fluid, responsive values that adapt without many breakpoints.

Learning Objectives

• Compose responsive values with clamp().
• Combine calc() with variables for powerful composition.

Details & Examples

.box{ width: calc(100% - 2rem); }
.title{ font-size: clamp(1rem, 2vw + .5rem, 2rem); }
.sidebar{ height: min(100vh, 800px); }

Try it

Checks for Understanding

1. What does clamp(min, preferred, max) return?

Exercises

1. Create a fluid type scale using clamp() for h1 and h2.
2. Use calc() to create a layout that is full width minus a fixed sidebar.