remove margin bottom from the last line in wrapped elements - css

Question

How can I keep the margin-bottom only for the elements that are not in the last line ?
.container {
display: flex;
flex-flow: row wrap;
background: green;
justify-content: space-between;
}
.block {
height: 60px;
max-width: calc((100% - (12px * 2)) / 3);
flex-basis: calc((100% - (12px * 2)) / 3);
background: orange;
box-shadow: inset 0 0 0 3px black;
margin-bottom: 12px;
}
<div class="container">
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
Thanks in advance.

Answer 1

This is what you are looking for:
.container .block:nth-last-child(-n+3){
margin-bottom: 0px;
}

Answer 2

for flex and grid, you can use the gap propertie to avoid playing with margins:
https://developer.mozilla.org/en-US/docs/Web/CSS/gap
The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.
Applies to multi-column elements, flex containers, grid containers
see https://www.caniuse.com/?search=gap for support
to set 3 elements on a line, give a min-width bigger than 25% and set them to grow via flex-grow. for the demo i used 26%, should be small enough to leave room for the gaps .
Demo of your code witout margins but still a gap in between elements
.container {
display: flex;
flex-flow: row wrap;
background: green;
gap: 12px;
/* see https://www.caniuse.com/?search=gap for support */
}
.block {
height: 60px;
flex: 1 1 0; /* or flex:1; */
/* to stretch them at the most and even their sizes*/
min-width: 26%;
/* it cannot be more than 3 on a row */
background: orange;
box-shadow: inset 0 0 0 3px black;
padding:5px; /* padding is fine */
}
<div class="container">
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
<hr>
<div class="container">
<div class="block">A single line
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
<hr>
<div class="container">
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">a second and last line
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
<hr>
<div class="container">
<div class="block">2 blocks , is that okay ?
</div>
<div class="block">
</div>
</div>

Answer 3

You can also use CSS grid:
.container {
display: grid;
grid-template-columns:repeat(3,1fr);
grid-gap:12px;
background: green;
}
.block {
height: 60px;
background: orange;
box-shadow: inset 0 0 0 3px black;
}
<div class="container">
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>