Verticale marge voor tegels in CSS

Laten we nu ook verticale marges toevoegen. Hiervoor geven we alle descendenten een margin-bottom met de waarde 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;
}

Zoals we zien, werkt alles goed, behalve dat de laatste rij marge heeft ten opzichte van de ouder. Meestal is dit niet kritisch.

Maak een tegelindeling met twee elementen per rij met een afstand tussen de elementen van 20px.

Maak een tegelindeling met drie elementen per rij met een afstand tussen de elementen van 20px.

Maak een tegelindeling met vier elementen per rij met een afstand tussen de elementen van 20px.