css grid-column-gap 创建不一致的间隙大小答案

【问题标题】：css grid-column-gap creates inconsistent gap sizecss grid-column-gap 创建不一致的间隙大小
【发布时间】：2022-02-05 03:16:06
【问题描述】：

我想渲染一行 div，它们之间有相等的 1px 间隙，但这比我想象的要难。

我正在尝试使用 css-grid 或 flexbox 来完成此操作。

使用 CSS-grid 我尝试了以下方法：

const Container = styled.div`
  width: 100%;
  height: 20px;

  display: grid;
  grid-auto-flow: column;
  column-gap: 1px;
`

这导致了：

（里面的所有 div 应该大小相同，并且它们之间有 1px 的间隙）。

但是，如您所知，几个 div 之间缺少间隙...

如果我将间隙大小增加到 2px，很明显这是一个空间问题。

现在您可以看到，有些列的间隙为 2px，而有些列的间隙为 1px（可能是因为没有“空间”让所有列之间恰好有 1 或 2px 的间隙并且仍然保持 div大小相等。

正如预期的那样，如果我调整它们所在的整个容器的大小，缺失间隙的数量和位置就会发生变化。这证实了可用空间存在问题。

但是，在这种情况下，我希望优先处理间隙而不是 div 的大小相同。如果内部的一个（或多个如果需要）div 的宽度比缺失的间隙小 1 像素，我会更喜欢，因为那样会不那么明显。

调整主容器的大小以匹配它完全适合的场景不是一种选择，因为它是一种响应式设计。

我也尝试使用 flexbox gap 代替，但它会导致相同的 CSS 问题，并且间隙不一致：

const Grid = styled.div`
  width: 100%;
  height: 20px;

  display: flex;
  gap: 1px;
`

const Item = styled.div`
  height: 100%;
  display: flex;
  flex: 1;
`

如何强制间隙始终保持相同大小，但在 div 的大小上做出妥协以确保间隙始终为 1px 宽？

【问题讨论】：

尝试将 div 的宽度设置为自动，而不是硬编码大小。另外，尝试从项目中删除flex: 1。
@Arcanus 哦，这很有趣。如果我在 flexbox 示例中将 width 设置为 auto 并将 flex: 1 留在那里，它似乎可以工作！（虽然它不适用于css-grid）但这对我来说已经足够了。谢谢！如果你愿意，你可以提出答案，我会接受的。

标签： css flexbox css-grid

【解决方案1】：

试试这个 CSS：

const note = document.querySelector('.main');
note.style.display = 'flex';
note.style.gap = '1px';
note.style.flexWrap = 'wrap';

.main>div {
  flex: 1 0 25px;
  background-color: green;
  /*25 px is minimum width of content check flex-basis*/
}

<div class="main">
  <div>a</div>
  <div>a</div>
  <div>a</div>
  <div>a</div>
  <div>a</div>
  <div>a</div>
  <div>a</div>
  <div>a</div>
  <div>a</div>
  <div>a</div>
  <div>a</div>
  <div>a</div>
  <div>a</div>
</div>

【讨论】：

【解决方案2】：

我在间隙和宽度方面遇到了类似的问题。

首先，了解问题很重要。当您将宽度设置为 100% 时，您是在告诉 div 占用一定的空间，在本例中为 100%。

更好的方法是为 div/元素设置所需的高度，但将宽度设置为 auto，这样更动态，不会占用您尝试设置的间隙。

.my-div {
  height: 100px;
  width: auto;
  display: 'flex';
  gap: 2px;
}

【讨论】：