CSS Calc（）division返回在网格模板列中的repeat（）函数中工作

我正在创建一个css方格，需要填充整个页面，每个方格需要精确到60像素

因此，我尝试使用calc（）来获取每行中应该呈现的项目数量（列数），这样我就不会从屏幕中获得额外的溢出

问题：CSS calc（）在某些情况下有效，在其他情况下无效

一些示例：

• 网格模板列：重复（计算（1），60px）；//工作
• 网格模板列：重复（计算（10*2），60px）；//工作
• 网格模板列：重复（计算（10*0.5），60px）；//不起作用
• 网格模板列：重复（计算（100/60），60px）；//不起作用

我认为这是因为repeat（）函数需要一个整数作为第一个参数，但是

calc（100/10）

也不起作用

实际上，

calc（100*calc（1/2））

和

calc（100*calc（10/2））

也不起作用

这是我的原始代码或我想做的：

 .grid-container{
    display:grid;
    grid-template-columns: repeat( calc(1024 / 60), 60px); 
    grid-template-rows: repeat(12, 60px); 
    grid-row-gap: 2px;
    grid-column-gap: 2px;
}

编辑：我认为最好的答案是

当对

calc

使用除法时，结果将是一个

数字

而不是一个

整数

，因此它不起作用，因为

repeat（）

需要一个

整数

根据（官方文件），repeat的第一个参数必须是一个正整数

根据数值和单位模块3级，这里应该允许，因为它

。。。可以在允许使用

、

、

、

、

、

或

值的任何位置使用

如果结果与属性期望的不同，规范没有指定

calc（）

的行为应该是什么。我们只知道它是“无效的”，所以如何处理无效案例取决于浏览器

到目前为止，最友好的浏览器是Firefox，它在

网格模板-*

的

repeat（）

中使用时，将

calc（）

的结果舍入到最接近的整数

---

Chrome很可能也会这样做，但目前最安全的方法似乎是使用JavaScript在页面加载时动态计算正整数并调整大小（并相应地写入

网格模板列

值）。

使用

calc（）

在Chromium 71/Ubuntu 18.10中，作为

repeat（）

的第一个参数，除了除法：。@DavidThomas您是否尝试过

calc（100*0.5）

或返回一个可能的浮点值的东西？如果

calc

的结果是一个正整数，您应该期望它能在所有支持

calc

的浏览器中工作。如果它不是，并且在特定浏览器中工作，则意味着浏览器会自动从结果中解析正整数。这不是规范的一部分，在其他浏览器中也不太可能起作用。确切地说，它更可能是从目前有效的版本中被抛弃的。@DavidThomas更有趣的是，Firefox似乎也在这个数字的四舍五入中。。因此，如果您尝试

calc（10/4）

，它等于

2.5

，它将四舍五入到

3

。