Margini verticali per le tessere in CSS

Ora aggiungiamo anche i margini verticali. Per fare ciò, impostiamo per tutti gli elementi figli margin-bottom con un valore di 10px:

<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;
}

Come possiamo vedere, tutto funziona bene, ad eccezione del fatto che l'ultima riga ha un margine dal genitore. Spesso questo non è critico.

Crea una tessera con due elementi per riga con una distanza tra gli elementi di 20px.

Crea una tessera con tre elementi per riga con una distanza tra gli elementi di 20px.

Crea una tessera con quattro elementi per riga con una distanza tra gli elementi di 20px.