Vertikale tussenruimtes vir teëlwerk in CSS

Laat ons nou ook vertikale tussenruimtes byvoeg. Om dit te doen, gee ons margin-bottom vir alle kinders met 'n waarde van 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;
}

Soos ons kan sien, werk alles goed, behalwe dat die laaste ry van die ouer afstaan. Dikwels is dit nie krities nie.

Maak 'n teëlwerk van twee elemente per ry met 'n afstand tussen elemente van 20px.

Maak 'n teëlwerk van drie elemente per ry met 'n afstand tussen elemente van 20px.

Maak 'n teëlwerk van vier elemente per ry met 'n afstand tussen elemente van 20px.