# CSS: “X”: Invalid type: “Y”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-x-invalid-type-y
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<style>
  .layout {
    display: grid;
    grid-template-columns: calc(2 * 1fr) 1fr;
  }
</style>
```

## Valid example

```html
<style>
  .layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
</style>
```

## Valid `var()` expressions

These declarations are valid CSS and pass the current validator:

```html
<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>
```