小像素尺寸的 CSS 网格/flexbox 间距问题答案

【问题标题】：CSS grid/flexbox spacing issues at small pixel sizes小像素尺寸的 CSS 网格/flexbox 间距问题
【发布时间】：2021-06-24 21:33:29
【问题描述】：

我正在尝试使用 CSS 网格或 flexbox 创建一个 3x3 的点网格。 在较大的尺寸上，我可以均匀地间隔网格，但在较小的尺寸（4px x 4px 点 w/2px 间隙）上，间距是关闭的。

这里是a CodePen 重现问题的链接，我在下面粘贴了堆栈代码 sn-p。这就是代码现在产生的结果：

我尝试了许多其他修复方法，并查看了其他人的问题，但无济于事。例如。使用其他 CSS flexbox 属性，如 justify-content: space-between，嵌套 div 以创建 3 个不同的行，使用边距和填充而不是网格/弹性间隙，并使用绝对定位来居中点。查看 DevTools 中的点，每个渲染的点似乎与其各自的 div 略有偏移，并且间距差异不均匀。

提前感谢您对此提供的任何帮助！

/* CSS */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#flexbox, #grid {
  background: lightgray;
  width: 36px;
  height: 36px;
  padding: 10px;
  margin: 10px;
}

.dot {
  background: gray;
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

#flexbox {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

#grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
}

<!-- HTML -->

<div id="flexbox">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<div id="grid">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

【问题讨论】：

你能分享一下它在小屏幕上的样子吗？
我编辑了问题以包含 PNG 片段。谢谢你，@ManasKhandelwal
有点难说，但是对您的网格规则的这种更改会产生影响吗？ #grid { display: grid; grid-template-columns: repeat(3, 4px); grid-template-rows: repeat(3, 4px); grid-gap: 2px; }
感谢@BertW 的回复。不幸的是，这并没有解决它
我尝试使用不同的显示器，间距问题消失了。所以这个问题似乎只发生在我的主屏幕上（即使浏览器窗口在我的单独显示器上的尺寸完全相同）。我还尝试使用不同的浏览器——结果相同。也许这是我屏幕上的一个错误，虽然我担心其他人也会看到错位。

标签： css flexbox css-grid

【解决方案1】：

好的——明白了：我的笔记本电脑屏幕分辨率设置为 125%（Windows 推荐），这导致了错位。当我将分辨率设置为 100% 时，它就消失了。希望这可以帮助任何遇到类似问题的人。再次感谢 Manas 和 Bert 的回复。

【讨论】：