CSS да вертикал оралиқлар билан плиточка

Энди вертикал оралиқларни ҳам қўшайлик. Бунинг учун ҳамма фарзандларга margin-bottom хусусиятини 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;
}

Кўриб турганимиздек, ҳамма нарса яхши ишламокда, фақat охиңги қатор ота-онадан оралиқ билан ажралиб турипти. Кўпинча бу муҳим эмас.

Иккита элементдан иборат қаторли плиточка ясанг, элементлар орасидаги масофа 20px бўлсин.

Учта элементдан иборат қаторли плиточка ясанг, элементлар орасидаги масофа 20px бўлсин.

Тўртта элементдан иборат қаторли плиточка ясанг, элементлар орасидаги масофа 20px бўлсин.