css - CSS固定尺寸边距仅在元素之间

这在某些项目上不断出现，我想看看是否有人可以找到更好的解决方案。

本质上，我正在尝试使一组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>

最佳答案

我认为应该指出，这对于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>

CodePen here