HTML Guides for var

An expression inside calc(), min(), max() or clamp() uses a value of a type that math functions can't compute with, most often the fr unit, or it combines var() with a percentage, which older versions of the CSS validator rejected by mistake.

Math functions compute with lengths, percentages, numbers, angles, times and frequencies. The validator checks the type of each operand and of the result. When one falls outside that list, it reports "Invalid type" and quotes the expression without the function name, so calc(2 * 1fr) shows up as 2 * 1fr.

The fr unit is a common cause. It's a flexible length for grid tracks, and the CSS Grid specification says fr values can't be represented in or combined with other units inside calc(). Browsers drop a declaration like grid-template-columns: calc(2 * 1fr) 1fr, and the grid falls back to the track sizes from earlier rules, or to a single column when there are none. Write the fraction directly as 2fr instead, and use minmax() when a track needs a minimum or maximum size.

When the quoted expression contains var(), as in 100% - var(--site-width) or 100% - var(--padding) * 2, the CSS is valid. A custom property has no type until the browser substitutes its value, and older versions of the CSS validator treated it as a value of the wrong type when it was combined with a percentage. The CSS validator fixed this in October 2026, and the validator Rocket Validator uses now accepts these expressions. You don't need to change your CSS. If a report from before the fix still lists the message, run a new report or mute the issue.

Invalid example

<style>

.layout {

display: grid;

grid-template-columns: calc(2 * 1fr) 1fr;

}

</style>

Valid example

<style>

.layout {

display: grid;

grid-template-columns: 2fr 1fr;

}

</style>

Valid var() expressions

These declarations are valid CSS and pass the current validator:

<style>

:root {

--header-height: 64px;

--padding: 16px;

--offset-x: 20px;

}

.content {

width: calc(100% - var(--padding) * 2);

height: calc(100% - var(--header-height));

background-position: calc(50% + var(--offset-x)) center;

}

</style>