Márgenes verticales para mosaicos en CSS

Ahora agreguemos también márgenes verticales. Para hacer esto, establezcamos margin-bottom en 10px para todos los elementos hijos:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	margin-right: 10px;
	margin-bottom: 10px;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

Como podemos ver, todo funciona bien, excepto que la última fila tiene un margen respecto al padre. La mayoría de las veces esto no es crítico.

Cree un mosaico con dos elementos por fila con una distancia entre elementos de 20px.

Cree un mosaico con tres elementos por fila con una distancia entre elementos de 20px.

Cree un mosaico con cuatro elementos por fila con una distancia entre elementos de 20px.