如何计算（）网格模板中的行数？ [英] How to calc() the number of rows in a grid template?

问题描述

我想使用 calc（）计算网格模板中的行数，但尝试获取重复按除法计数不起作用：

I'd like to calculate the number of rows in a grid template using calc(), but trying to get the repeat count with division isn't working:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.2);
}

.grid>div {
  background: tomato;
  width: 20px;
  text-align: center;
  margin: auto;
}

.grid.no-calc {
  grid-template-rows: repeat(3, 30px);
}

.grid.addition {
  grid-template-rows: repeat(calc(1 + 2), 30px);
}

.grid.subtraction {
  grid-template-rows: repeat(calc(4 - 1), 30px);
}

.grid.multiplication {
  grid-template-rows: repeat(calc(3 * 1), 30px);
}

.grid.division {
  grid-template-rows: repeat(calc(6 / 2), 30px);
}

<p>Top 4 have their row heights set correctly</p>

<div class="grid no-calc">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="grid addition">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="grid subtraction">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="grid multiplication">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<p>Division doesn't work in setting row height</p>

<div class="grid division">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

关于重复， calc 和除法一起工作的方式，我是否缺少一些东西？这是在Chrome 71.0.3578.98中。

Is there something I'm missing about the way repeat, calc, and division work together? This is in Chrome 71.0.3578.98.

推荐答案

使用除以 calc 结果将是一个数字，而不是一个整数，因此将不起作用，因为 repeat（）期望 interger

When using division with calc the result will be a number and not an integer thus it won't work because the repeat() expect an interger

repeat（）语法大约是

repeat（[< positive-integer> | auto-填充|自动调整]，< track-list>） ^参考

和

在 / ，检查右侧是否为< number> 。如果左侧为< integer> ，请解析为< number> 。否则，请解析为左侧的类型。 ^参考

At /, check that the right side is <number>. If the left side is <integer>, resolve to <number>. Otherwise, resolve to the type of the left side.^ref

并且

数字值用< number> ，并表示实数，可能带有小数部分。 ^参考

Number values are denoted by <number>, and represent real numbers, possibly with a fractional component.^ref

如果我们俩都知道结果将是一个整数，浏览器仍将其视为一个数字。

Even if we both know that the result will be an integer the browser will still consider it as a number.

如果在一个整数中有一个数字，您可能会遇到相同的乘法问题。侧面

You can have the same issue with multiplication in case you have a number in one of the sides

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.2);
}

.grid>div {
  background: tomato;
  width: 20px;
  text-align: center;
  margin: auto;
}

.grid.no-calc {
  grid-template-columns: repeat(3, 30px);
  border-bottom:3px solid red;
}

.grid.multiplication {
  grid-template-columns: repeat(calc(3 * 1.0), 30px); /*will fail*/
  border-bottom:calc(3px * 1.0) solid red;
}

.grid.division {
  grid-template-columns: repeat(calc(6 / 2), 30px);
  border-bottom:calc(6px / 2) solid red; /*this will work because border accept numbers*/
}

<div class="grid no-calc">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>


<div class="grid multiplication">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="grid division">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Firefox的行为有所不同，即使我们明确指定数字也不会失败。在所有情况下，Fiferox都会尝试将 calc（）的结果四舍五入为一个正整数。

Firefox is behaving differently and never fail even if we explicitely specify numbers. In all the cases Fiferox will try to round the result of calc() to a positive integer one.

以下所有示例在Chrome上均无法运行，并且可以在Firefox上运行：

All the examples below will fail on Chrome and will work on Firefox:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.2);
}

.grid>div {
  background: tomato;
  width: 20px;
  text-align: center;
  margin: auto;
}

.grid.no-calc {
  grid-template-columns: repeat(calc(2.8), 30px); /*will be converted to 3*/
  border-bottom:calc(calc(2.8) * 1px) solid red;
}

.grid.multiplication {
  grid-template-columns: repeat(calc(3 * 1.55), 30px);  /*will be converted to 4*/
  border-bottom:calc(calc(3 * 1.55) * 1px) solid red;
}

.grid.division {
  grid-template-columns: repeat(calc(6 / 2.8), 30px); /*will be converted to 2*/
  border-bottom:calc(calc(6 / 2.8) * 1px) solid red;
  
}

<div class="grid no-calc">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>


<div class="grid multiplication">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="grid division">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

这篇关于如何计算（）网格模板中的行数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！