CSS网格中的1px间隙不一致

Question

我想创建一个只有内边框的盒子网格。为此，我使用背景颜色和网格项目之间的间隙，但间隙看起来不一致。无法理解为什么有些线条看起来比其他线条更粗。我尝试使用 flex 创建它，但那里的线条看起来也很粗。这是我的代码的codepen示例。 https://codepen.io/anon/pen/PrdKQm

html:

<div id="wrap">
    <div class="box"><div>1</div></div>
    <div class="box"><div>2</div></div>
    <div class="box"><div>3</div></div>
    <div class="box"><div>4</div></div>
    <div class="box"><div>5</div></div>
    <div class="box"><div>6</div></div>
    <div class="box"><div>7</div></div>
    <div class="box"><div>8</div></div>
    <div class="box"><div>9</div></div>
    <div class="box"><div>10</div></div>
    <div class="box"><div>11</div></div>
  <div class="box"><div>12</div></div>
</div>

css:

*{font-family: arial;}

#wrap{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; max-width: 500px; gap: 1px; place-items: end; background: #ccc;}

#wrap>div.box{  height: 0; padding-bottom: 100%; background-color: #fff; width: 100%;}

Answer 1

你可以试试下面的边框：

* {
  font-family: arial;
}

#wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  max-width: 500px;
  position: relative;
}

#wrap>div.box {
  height: 0;
  padding-bottom: 100%;
  width: 100%;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

#wrap>div.box:nth-child(4n + 4) {
  border-right: none;
}

#wrap:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #fff;
}

<div id="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 2

这里需要在浏览器中进行大量计算，它会使用近似值。想象一下 wrap 容器的宽度是 1001 像素，现在里面有 4 个容器，如何计算宽度和边框？

我的经验：如果您想要像素边框，请使用边框。我使用了带有负边距的老式“hack”，如下所示：

• 在内部 div 上使用边框和负边距使框重叠
• 包装容器没有间隙（也没有背景颜色）

我在这里有类似的设置：https://teutonic.co/examples/css-grid#no-gap

上面评论中链接的question and answers 与很好的例子非常相似。这里使用了不同边的不同边框。