用 vw 单位减去像素数量定义的网格列？
Grid column defined with vw unit minus a pixel amount?
我有一个网格grid-template-columns: 30vw 20vw 30vw;
我想从其中两个宽度中减去一个固定的像素数量，例如我希望第一列的计算宽度为 30vw - 1px.
我想要的是（下面的代码不起作用）：
grid-template-columns: calc(30vw-1px) 20vw calc(30vw-1px);
这样我就可以在网格外部获得一个边框，它仍然可以作为视口比例（不希望也以 vw 单位定义边框 - 希望它固定宽度为 1px）。
可能吗？
您的 calc() 参数无效。
你有这个：
grid-template-columns: calc(30vw-1px) 20vw calc(30vw-1px)
您需要这样做：
grid-template-columns: calc(30vw - 1px) 20vw calc(30vw - 1px)
来自 MDN：
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.
我有一个网格grid-template-columns: 30vw 20vw 30vw;
我想从其中两个宽度中减去一个固定的像素数量，例如我希望第一列的计算宽度为 30vw - 1px.
我想要的是（下面的代码不起作用）：
grid-template-columns: calc(30vw-1px) 20vw calc(30vw-1px);
这样我就可以在网格外部获得一个边框，它仍然可以作为视口比例（不希望也以 vw 单位定义边框 - 希望它固定宽度为 1px）。
可能吗？
您的 calc() 参数无效。
你有这个：
grid-template-columns: calc(30vw-1px) 20vw calc(30vw-1px)
您需要这样做：
grid-template-columns: calc(30vw - 1px) 20vw calc(30vw - 1px)
来自 MDN：
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—whilecalc(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.