Vertikal margen for fliser i CSS

Lad os nu tilføje også vertikale margener. For at gøre dette, sætter vi margin-bottom for alle efterkommere til værdien 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;
}

Som vi kan se, virker alt godt, bortset fra at den sidste række har margen fra forælderen. Som oftest er dette ikke kritisk.

Lav fliser med to elementer pr. række med afstand mellem elementerne på 20px.

Lav fliser med tre elementer pr. række med afstand mellem elementerne på 20px.

Lav fliser med fire elementer pr. række med afstand mellem elementerne på 20px.