MODERN CSS UNITS

clamp() — RESPONSIVE WITH LIMITS

SYNTAX

clamp(MIN, PREFERRED, MAX)

👉 Think like this:

“Value should grow… but NOT go below MIN and NOT exceed MAX”

YOUR EXAMPLE

font-size: clamp(16px, 2vw, 32px);

calc() — DYNAMIC CALCULATION

SYNTAX

calc(expression)

You can do math inside CSS:

• +
• -
• *
• /

BASIC EXAMPLE

width: calc(100% - 50px);

🔍 HOW IT CALCULATES

Let’s say:

• Parent width = 1000px

👉 100% = 1000px

Now:

1000px - 50px = 950px

👉 Final width = 950px

 Example 1: Layout spacing

.container {
  width: calc(100% - 40px);
}

👉 Leaves space for padding/margin

Example 2: Centering trick

.box {
  left: calc(50% - 100px);
}

👉 Moves element to center

Example 3: Equal columns

.col {
  width: calc(100% / 3);
}

👉 3 equal columns