How to set space between contained divs? [duplicate] - html

Question

This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 3 years ago.
The inner divs will be thumbs that are being continuously added and eventually wrap to next row.
The space between divs should be 20px.
I want four divs in one row.
Two constraints:
Ideally no flexbox space-between, due to last row looking weird with only two divs.
Adding margin only between inner divs not a good option (unless there’s an easy way to do this for dynamically added content?).
Is there a way to accomplish this?
#outer {
width: 460px;
display: inline-block;
}
.inner {
width: 100px;
height: 100px;
float: left;
}
<div id="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
</div>
Codepen example

Answer 1

Try this. Hope, it will work.
I used the CSS grid. By using grid-template-columns, I have declared how four children elements of outer ID take the same area in a row. After that, I used grid-gap: 20px for giving space between four children block.
#outer {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}

Answer 2

You can use this code:
.inner {
display: inline-block;
}
.inner:not(:last-child){
margin-right: 20px;
}
<div id="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
</div>
Read a reference here: css-protips

Answer 3

You may need to use nth-child(4n)
.inner {
margin-right: 20px;
}
.inner:nth-child(4n){
margin-right:0px;
}
Codepen: https://codepen.io/abozanona/pen/RwbqmZb

Answer 4

You could use a margin and avoid the last one:
.inner:not(:last-of-type) {
margin-right: 20px;
}