3列居中的css网格右侧有1px的边距

Question

我正在使用css-grid规范进行一些测试，并且在第一次测试时遇到了问题。我想创建一个包含3列的居中网格，并在网格内部使用div填充列的宽度。这有效，但我没想到右边的1px边距看到了：

＆＃13;

＆＃13;

.wrapper {
  max-width: 400px;
  margin: 0 auto;
  background-color: red;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.cell {
  background-color: grey;
}

＆＃13;

<div class="wrapper">
  <div class="grid">
    <div class="cell">a</div>
    <div class="cell">b</div>
    <div class="cell">c</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我预计这与百分比舍入问题有关。如果您缩放浏览器，您会发现边距有时会消失。

我知道我可以用flexbox解决这个问题并让细胞增长，但我知道如何用css-grid处理这个问题。

Answer 1

这是一个数学，无法修复。例如，如果你将100除以3，你会得到像33.33333333333333 ..........

顺便说一下，你可以使用

grid-template-columns: repeat(3, 1fr);

而不是

grid-template-columns: 1fr, 1fr, 1fr;