Fluid type and space in CSS

clamp scales a value with the viewport between a floor and a ceiling.

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  line-height: 1.1;
}

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

.wrapper {
  width: min(68rem, 100% - 2rem);
  margin-inline: auto;
}

How it works

1. clamp(min, preferred, max) never leaves the bounds.
2. A vw term in the middle is what makes it fluid.
3. The same trick works for padding and gaps.

Keywords and builtins used here

• clamp
• min
• rem
• section
• vw
• width
• wrapper

The run, in numbers

Lines

13

Characters to type

196

Tokens

64

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 45 seconds.

Type this snippet

Step 2 of 4 in Responsive, step 2 of 21 in Responsive & modern CSS.

← Previous Next →