Столбец сетки определен с единицей измерения vw минус количество пикселей?

Question

У меня есть сетка с grid-template-columns: 30vw 20vw 30vw;

Я бы хотел вычесть фиксированное количество пикселей из двух этих значений ширины, например, Я хотел бы, чтобы первый столбец имел расчетную ширину 30vw - 1px.

То, что я хотел бы, это что-то вроде (ниже код не работает):

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

Это так, чтобы я мог получить границу на внешней стороне сетки, которая все еще работает как масштаб окна просмотра (я бы предпочел не определять границу в единицах vw - желательно, чтобы она была фиксированной шириной 1px).

Возможно ли это?

Answer 1

Ваши calc() аргументы недействительны.

У вас есть это:

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

Вам нужно сделать это:

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

От MDN:

calc()

Операторы + и - должны быть окружены пробелами.

Например, calc(50% -8px) будет анализироваться как процент на отрицательную длину - недопустимое выражение - в то время как calc(50% - 8px) процент с последующим оператором вычитания и длиной.

Аналогично, calc(8px + -50%) рассматривается как длина, за которой следует Оператор сложения и отрицательный процент.

Операторы * и / не требуют пробелов, но добавляют их для согласованность допускается и рекомендуется.