用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%)被视为一个长度，后跟一个   加法运算符和负百分比。

     

*和/运算符不需要空格，但可以将其添加为   一致性是允许的，也是推荐的。