Modern CSS Functions and Units

Learn calc(), min(), max(), clamp(), custom properties, viewport units, logical units, aspect-ratio, and intrinsic sizing.

calc()

calc() allows CSS to perform arithmetic involving compatible values. It is particularly useful when combining relative and fixed units, such as creating a full-width container with a fixed gutter.

The browser resolves the expression during computed-value processing.

calc() Value Construction

Combining Relative and Fixed Units

.content {
  width: calc(100% - 2rem);
  margin-inline: auto;
}

.sidebar {
  width: calc(100vw - 320px);
}

💡 calc() lets fixed and relative values participate in the same expression.

Key Takeaways

calc() is useful for mixed-unit calculations.
Use it when a relationship cannot be expressed cleanly with simpler sizing functions.

Knowledge Check

What is a common use of `calc()`?

min(), max() and clamp()

min() chooses the smallest value, max() chooses the largest, and clamp() constrains a value between a minimum and maximum while allowing a preferred fluid value.

These functions are powerful for responsive typography, spacing, containers, and component dimensions.

min(), max() and clamp()

Fluid Typography

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

.container {
  width: min(100% - 2rem, 1200px);
}

.panel {
  padding: max(1rem, 3vw);
}

💡 These functions encode responsive constraints directly in CSS.

Key Takeaways

min() chooses the smallest value.
max() chooses the largest value.
clamp() provides minimum, preferred, and maximum values.

Knowledge Check

What is the general syntax of `clamp()`?

Viewport and Container Units

Viewport units include vw, vh, vmin, and vmax. Modern viewport units also include svh, lvh, and dvh, which address differences between small, large, and dynamic viewport states on mobile browsers.

Container query units such as cqw and cqh can size content relative to a query container.

Viewport and Container Units

Modern Viewport Sizing

.hero {
  min-height: 100dvh;
  padding-block: 5svh;
}

💡 dvh accounts for the dynamic viewport while svh represents the small viewport height.

Key Takeaways

Modern viewport units help handle mobile browser UI changes.
Container units allow sizing relative to query containers.

Knowledge Check

What does `dvh` represent?

aspect-ratio

The aspect-ratio property defines a preferred width-to-height ratio for an element. It is useful for media cards, video containers, placeholders, and responsive components where stable geometry is important.

Aspect Ratio

Video Card Ratio

.video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

💡 The element maintains a 16:9 ratio as its width changes.

Key Takeaways

aspect-ratio creates predictable proportions.
It can reduce layout shifts when media dimensions are known.

Knowledge Check

What does `aspect-ratio: 16 / 9` describe?

calc()

min(), max() and clamp()

Viewport and Container Units

aspect-ratio

STAY UPDATED WITH BYTES!