Units (px, em, rem, vw, vh, fr, %)

Choose the right units for sizing, spacing, and layout grids.

unitsresponsive

Learning checklist

Definition

Choose the right units for sizing, spacing, and layout grids.

Syntax

Root-based scaling

Example

Use the visualizer below to apply these properties and see the result live.

Deep dive

Why this matters

Principles, mental models, and debugging clues tailored to the topic.

Each property is paired with motion or color feedback so you build muscle memory, not just recall syntax.

Controls emit exact CSS you can copy. Use it as a starter token or paste into DevTools for instant validation.

Learn where reflow, repaint, or compositing occurs so you avoid jank and choose GPU-friendly paths.

Focus-visible, reduced-motion, and contrast tips are woven into every lab to keep experiences inclusive.

Practice

Try recreating a UI card using this topic. Toggle between dark and light modes to validate token contrast and responsiveness.

Tip: use DevTools overlays (grid/flex) plus the copy CSS button.

Interactive Lab

Play with clamp(), min(), and viewport units to build constraint-based sizing.

Clamp: 14px min → 28px max

Try these

Min size (px)14pxMax size (px)28px

Constraint-based sizing with clamp(), min(), and viewport units.

Adjust min/max to see the clamped range. Width uses min() to cap the container across breakpoints.

CSS

.utility {
  font-size: clamp(14px, 1vw + 1rem, 28px);
  width: min(90vw, 640px);
}

HTML

<div class="utility">Constraint-based sizing with clamp(), min(), and viewport units.</div>