CSS计算器（）返回司工作怪异网格模板列内重复（）函数[复制]内

Question

这个问题已经在这里有一个答案：

• How to calc() the number of rows in a grid template? 1个回答

我创建正方形的CSS格需要填充整个页面，并且每平方需要精确60PX。

所以我试图用钙（）来获取项目，我应该每行中渲染（列数）的数量，所以我没有得到额外的溢出屏幕之外。

问题：CSS计算（）的作品在某些情况下以及在其他情况下无法正常工作。

一些例子：

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

不过，我觉得那是因为重复（）函数需要一个整数作为第一个参数，但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;
}

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

当采用师带calc的结果将是一个number而不是integer这样，因为repeat()期待一个interger将无法正常工作

Answer 1

据Grid Layout Module - Level 1（正式文件），重复的第一个参数是一个正整数。

据值和单位模块 - 3级，calc()应该被允许在这里，因为它...

...可用于任何<length>，<frequency>，<angle>，<time>，<percentage>，<number>，或<integer>值是允许的。

该规范不指定calc()的行为应该是什么，如果结果比属性需要什么不同。我们所知道的是，它是“无效的”，所以它的浏览器来决定如何治疗无效的情况下。

到目前为止，最友好的浏览器Firefox的是，这轮在calc()的grid-template-*使用时repeat()s导致高达最接近的整数。 这是可能的Chrome浏览器将做同样的，但是，就目前而言，最安全的路线似乎是使用JavaScript来动态计算正整数的页面加载和调整（以及相应的写grid-template-columns值）。