Using fraction (fr) in calc() gives "Invalid property value"

Question

I'm trying to use calc() on some widths while using CSS Grid. So one thing I'm trying is this:

grid-template-columns: calc(1fr - 50px) calc(1fr - 50px);

As I want it to be two fractions, but remove 50px since that is used for padding and such. However, when doing this, Chrome says: "Invalid property value".

Can't calc() be used on fractions, or am I doing something wrong here?

Answer 1

An fr unit is not a standard length, like percentages or pixels. It represents only leftover space.

Therefore, fr cannot be used in calc() expressions.

§ 7.2.3. Flexible Lengths: the fr unit

A flexible length is a dimension with the fr unit, which represents a fraction of the leftover space in the grid container.

fr units are not lengths so they cannot be represented in calc() expressions.

But do you really need calc() in the first place?

fr applies only to remaining space, which is what is left after true lengths, such as width, borders, margin and padding have been factored in.

Consider using fr on its own. Otherwise, post a complete example with the problem.