1像素间距在CSS网格中不一致

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

在此处的浏览器中需要进行很多计算，它将使用近似值。假设包装容器的宽度为1001像素，现在其中有4个容器，如何计算宽度和边框？

我的经验：如果需要像素边框，请使用边框。我曾经使用过这种带有负边距的老式“ hack”：

• 在内部div上使用边框并使用负边距使框重叠
• 包装容器没有缝隙（并且没有背景色）

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

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

Answer 2

您可以尝试使用以下边框：

* {
  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>