Widely availableVery useful for everyday layout work when a relationship is easier to express as math than as a fixed value.
Units and functions Widely available

calc()

calc() allows CSS to combine values and units in a single expression. It is one of the most practical CSS math tools for layout, spacing, and responsive sizing.

calcLayoutSizing

Overview

calc() allows CSS to combine values and units in a single expression. It is one of the most practical CSS math tools for layout, spacing, and responsive sizing.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
calc
26
12
16
7
28
7
gradient color stops

Gradient color stops support
19
12
19
6
28
6
nested

Nested `calc()` support
51
16
48
11
51
11
number values

`<number>` value support
31
12
48
6
31
6
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (19)
Notes 5 item(s)
Implementation note
  • Before Firefox 59 `calc()` is not supported in `rgb()` and other color functions.
  • Before Firefox 57 `calc(1*2*3)` is not parsed successfully.
  • Firefox 57 increased the number of places `calc()` could substitute another value. See bug 1350857.
Removed
  • This feature was removed in a later browser version (53)
Compatibility
  • Available with a vendor prefix: -moz- (4)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (6)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (6)

Syntax

CSS 
.sidebar-layout {
  /* Allocate the remaining width to the main content after subtracting the sidebar width */
  width: calc(100% - 250px);
}

.centered-box {
  /* Centered in the viewport */
  margin-top: calc(50vh - 200px);
}

.fluid-padding {
  /* Minimum 16px, expands based on viewport width */
  padding: calc(1rem + 2vw);
}

Live demo

100% - Lockwidth

calc() function 100% - lockwidth demo.

PreviewFullscreen

Rem + Vw blend

calc() function Rem + vw blend demo.

PreviewFullscreen

putchild. Calculation

calc() function putchild. Calculation demo.

PreviewFullscreen

Use cases

  • Mixed-unit sizing

    Subtract fixed headers from viewport space or combine percentages with fixed gaps in one declaration.

  • Component layout rules

    Express relationships such as full width minus padding or shared columns with consistent arithmetic.

Cautions

  • calc() improves clarity only when the relationship itself is meaningful and easy to read.
  • Avoid stacking too many nested expressions when a simpler layout model would communicate intent better.

Accessibility

  • Math-based sizing can support flexible zoom-friendly layouts when used thoughtfully.
  • Test calculated dimensions under large text, zoom, and narrow screens to avoid clipping.

Related links

Powered by web-features