在calc（）中使用分数（fr）给出＆＃34;无效的属性值＆＃34;

Question

我尝试在使用CSS网格时在某些宽度上使用calc()。所以我尝试的一件事是：

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

因为我希望它是两个分数，但删除50px，因为它用于填充等。但是，在执行此操作时，Chrome会说：＆＃34;无效的属性值＆＃34;。

可以calc()用于分数，还是我在这里做错了什么？

Answer 1

fr单位不是标准长度，如百分比或像素。它只代表剩余的空间。

因此，fr无法在calc()表达式中使用。

  

§ 7.2.3. Flexible Lengths: the fr unit

     

灵活长度是fr单位的维度，代表   网格容器中剩余空间的一小部分。

     

fr单位不是长度，因此无法在calc()表达式中表示。

但你真的首先需要calc()吗？

fr仅适用于剩余空间，即在之后留下的空格，例如宽度，边框，边距和填充等已被考虑在内。

考虑单独使用fr。否则，请发布问题的完整示例。