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>

CodePen here