CSS fixed size margin only between elements - css

Question

This keeps coming up on certain projects and I wanted to see if anyone may have a better solution.
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. The snippet below is an example of what I'm looking for, my hope is someone may have a cleaner solution.
My question here is if anyone has a better solution that may use less css or less HTML elements. The important things to maintain:
Localization compliant - Since we aren't using margin left or right there aren't any weird localization issues in rtl
Alignment - It shouldn't size to the whole window if it doesn't need to but it should wrap if needed. (see example)
Spacing - Should be a fixed amount of space between the elements
If you have any ideas I'd love to hear them!
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

I think it should be noted this is trivial with 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>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<div class="container fixed-width">
<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>
</div>
CodePen here

Answer 2

Necromancing, but I'd like to add that a pretty quick way to accomplish this if you're just dealing with a row/column is to use a last-child pseudoselector to override margin to 0. Like so:
.column-item {
width: 5px;
height: 5px;
background-color: red;
margin-bottom: 20px;
}
.column-item:last-child {
margin: 0;
}
beginning
<div id="column">
<div class="column-item"></div>
<div class="column-item"></div>
<div class="column-item"></div>
<div class="column-item"></div>
<div class="column-item"></div>
<div class="column-item"></div>
<div class="column-item"></div>
</div>
end

Answer 3

If you know you will always have 5 boxes in the fixedwidth box, you could do something like:
HTML (Slim)
.container
- 5.times do
.box
.container.container--thinner
- 15.times do
.box
CSS (SCSS)
$width : 36;
body {background-color: #000;}
.container {
display:flex;
flex-wrap: wrap;
background-color: white;
margin-bottom: 2em;
width: $width + em;
.box {
width: 2em;
height: 2em;
margin-right: 2em;
background-color: red;
}
&--thinner {
justify-content: space-between;
width: $width/2 + em;
.box {
margin-bottom: 2em;
&:nth-of-type(5n) {
margin-right: 0;
}
}
}
}
Here's a Codepen