CSS网格中的1像素间隙不一致

Question

CSS网格中的1像素间隙不一致

3

我想创建一个只有内部边框的方格网格。为此，我使用背景颜色和网格项之间的间隙，但间隙看起来不够一致。不明白为什么有些线看起来比其他线粗。我尝试使用 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%;}

- mysterious

1

也许在边框或渐变方面会有更好的运气： https://dev59.com/XVYN5IYBdhLWcg3wJFX8#47883171 - Temani Afif

3个回答

0

您可以使用以下样式添加边框：

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

- Temani Afif

0

我之前也遇到过类似的问题，不过那是由于高度为1像素的块呈现不一致导致的。套用边框为1像素的方案解决了我的问题！虽然我不知道为什么，但它起作用了...

- Pavel

这并没有真正回答问题。如果您有不同的问题，可以通过点击提问来提出。如果您想在此问题获得新的答案时收到通知，您可以关注此问题。一旦您拥有足够的声望，您还可以添加悬赏以吸引更多关注。- 来自审核 - Webdeveloper_Jelle

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Frank Lämmer · Accepted Answer

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

我的经验是：如果要使用像素边框，请使用边框。我曾经使用过旧式的“hack”负边距，如下所示：

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

我在这里有一个类似的设置：https://teutonic.co/examples/css-grid#no-gap 上面评论中链接的问题和答案非常相似，并且有很好的例子。这里使用不同的边框在不同的边上。