CSS 仅在元素之间固定大小边距

Question

这个问题在某些项目中不断出现，我想看看是否有人有更好的解决方案。

本质上，我试图拥有一组 div 元素，其中所有元素之间的间距相等，但周围的间距不同。下面的代码片段是我正在寻找的示例，我希望有人可能有一个更干净的解决方案。

我的问题是是否有人有更好的解决方案，可以使用更少的 css 或更少的 HTML 元素。需要维护的重要事项：

• 本地化兼容 - 由于我们不使用左或右边距，因此 rtl 中不存在任何奇怪的本地化问题
• 对齐 - 如果不需要，它不应该调整到整个窗口的大小，但如果需要，它应该换行。（参见示例）
• 间距 - 元素之间的间距应该是固定的

如果您有任何想法，我很想听听！

        body {
            background-color: black;
            padding: 30px;
        }
        .inner {
            overflow: hidden;
            margin: 20px 0px;
        }
        .innerMargin {
            background-color: white;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin: -10px;
        }
        .innerMargin > div {
            flex: 0 0 20px;

            background-color: red;
            margin: 10px;
            height: 20px;
            width: 20px;
        }
        .fixedWidth {
            width: 180px;
        }

<div class="inner">
        <div class="innerMargin">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="inner fixedWidth">
        <div class="innerMargin">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

Answer 1

我认为应该注意的是，这对于 CSS Grid 来说是微不足道的。

body {
  background-color: #000;
}

.container {
  display: grid;
  grid-template: 20px/repeat(auto-fit, 20px);
  grid-gap: 20px;
  background-color: #FFF;
  margin: 20px;
}

.container div {
  background-color: red;
}

.fixed-width {
  width: 180px;
}

.container > div {
  background-color: red;
}

<div class="container">
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
</div>
<div class="container fixed-width">
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
</div>

代码笔在这里