css - 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;