css - 1px 间隙在 CSS 网格中不一致

Question

我想创建一个只有内边框的方框网格。为此，我使用了背景颜色和网格项之间的间隙，但间隙看起来并不一致。无法理解为什么有些线条看起来比其他线条粗。我尝试用 flex 创建它，但那里的线条看起来也很粗。这是我的代码的代码笔示例。 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上面评论中的链接与很好的例子非常相似。这里使用不同边的不同边框。