CSS fixed size margin only between elements
<p>This keeps coming up on certain projects and I wanted to see if anyone may have a better solution.</p>

<p>Essentially, I'm trying to have a group of div elements of which all have an equal amount of spacing between them but not around. <strong>The snippet below is an example of what I'm looking for, my hope is someone may have a cleaner solution.</strong></p>

<p>My question here is if anyone has a better solution that may use less css or less HTML elements. The important things to maintain:</p>

<ul>
<li>Localization compliant - Since we aren't using margin left or right there aren't any weird localization issues in rtl</li>
<li>Alignment - It shouldn't size to the whole window if it doesn't need to but it should wrap if needed. (see example)</li>
<li>Spacing - Should be a fixed amount of space between the elements</li>
</ul>

<p>If you have any ideas I'd love to hear them!</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>        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 &gt; div {
            flex: 0 0 20px;

            background-color: red;
            margin: 10px;
            height: 20px;
            width: 20px;
        }
        .fixedWidth {
            width: 180px;
        }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="inner"&gt;
        &lt;div class="innerMargin"&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="inner fixedWidth"&gt;
        &lt;div class="innerMargin"&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
            &lt;div&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>