calc and units in CSS

Mixing units in one expression, and the units worth reaching for.

.pane {
  height: calc(100dvh - 3.5rem);
  padding-inline: calc(var(--pad, 1rem) / 2);
}

.prose {
  max-width: 68ch;
}

.grid {
  grid-template-columns: repeat(
    auto-fit, minmax(calc(50% - 0.5rem), 1fr)
  );
}

How it works

1. calc can mix percentages with absolute lengths.
2. dvh tracks a mobile browser's shrinking viewport.
3. ch and ex are font-relative, which suits text measures.

Keywords and builtins used here

• calc
• ch
• grid
• height
• minmax
• pane
• prose
• rem
• repeat
• var

The run, in numbers

Lines

14

Characters to type

200

Tokens

66

Three-star pace

75 tpm

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

Type this snippet

Step 2 of 3 in Values & units, step 21 of 26 in Selectors & the box model.

← Previous Next →