Grid column defined with vw unit minus a pixel amount?

Question

I have a grid with grid-template-columns: 30vw 20vw 30vw;

I'd like to subtract a fixed pixel amount from two of those widths, e.g. I'd like the first column to have a calculated width of 30vw - 1px.

What I'd like is something like (below code doesn't work):

grid-template-columns: calc(30vw-1px) 20vw calc(30vw-1px);

This is so I can get a border on the outside of the grid that still works as the viewport scales (would prefer not to define the border in vw units also - want it fixed width of 1px).

Is it possible?

Answer 1

Your calc() arguments are invalid.

You have this:

grid-template-columns: calc(30vw-1px) 20vw calc(30vw-1px)

You need to do this:

grid-template-columns: calc(30vw - 1px) 20vw calc(30vw - 1px)

From MDN:

calc()

The + and - operators must be surrounded by whitespace.

For instance, calc(50% -8px) will be parsed as a percentage followed by a negative length—an invalid expression—while calc(50% - 8px) is a percentage followed by a subtraction operator and a length.

Likewise, calc(8px + -50%) is treated as a length followed by an addition operator and a negative percentage.

The * and / operators do not require whitespace, but adding it for consistency is both allowed and recommended.