我有一个3x3的css网格,我想分别计算两个外部列和行的大小,中间的是1fr
。
到目前为止,我有:
(see this codepen)
html {
--zoom-scale: 1;
}
body {
--weight: calc(((var(--zoom-scale) - 1) / 2 * 1fr));
}
.grid {
grid-template-columns: var(--weight) 1fr var(--weight);
grid-template-rows: var(--weight) 1fr var(--weight);
/* Expecting this for --weight = 1 */
/* grid-template-columns: 0 1fr 0;
grid-template-rows: 0 1fr 0; */
/* And this for --weight = 3 */
/* grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr; */
}
我的Chrome浏览器从来不接受任何计算的模板属性值。这里正确的语法是什么?
正如您可能已经猜到的,我在这里试图解决的总体问题是将给定的矩形空间划分为网格,使得中间的单元格可以按--zoom-scale
的比例放大,并且仍然完全包含在网格容器中。
2条答案
按热度按时间unftdfkk1#
您不能使用
fr
执行计算,您可以使用grid-template-columns: calc(1 * 1fr);
进行验证,您将获得无效值。您可以切换到百分比,从
0
切换到50%
还可以使用margin以较少的代码执行相同的任务
2vuwiymt2#
fr
单元不是数学运算符(+,-,×,÷),因此不能在calc()
函数中使用。fr
单位只是自由空间的一种表示,而不是实际的长度单位。7.2.4.柔性长度:
fr
单元灵活长度或
<flex>
是单位为fr
的维度,它表示网格容器中剩余空间的一小部分。calc()
函数是一个使用数学运算符的计算。10.1.基本运算:
calc()
calc()
函数是一个数学函数,它允许使用加法(+)、减法(-)、乘法(*)、除法(/)和括号对数值执行基本算术。一个
calc()
函数包含一个计算,它是一个值序列,中间穿插着运算符,可能用括号分组。问题中的问题的解决方案已在another answer中提供。