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

Question

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

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

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

.cell {
  background-color: grey;
}

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

我认为这与百分比舍入问题有关。如果您缩放浏览器，您会看到边距有时会消失。

我知道我可以用 flexbox 解决这个问题并让单元格生长，但我更想知道如何用 css-grid 处理这个问题。

Answer 1

这是一个数学运算，无法修正。例如，如果你将 100 除以 3，你会得到类似 33.33333333333333..........

顺便说一句，你可以使用

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

代替

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