Vertikalūs tarpai plytelėms CSS

Dabar pridėkime ir vertikalius tarpus. Tam visiems palikuoniams nustatykime margin-bottom reikšmę 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;
}

Kaip matome, viskas veikia gerai, išskyrus tai, kad paskutinė eilutė atitraukta nuo tėvinio elemento. Dažniausiai tai nėra kritiška.

Sukurkite plytelę po du elementus eilėje su tarpu tarp elementų 20px.

Sukurkite plytelę po tris elementus eilėje su tarpu tarp elementų 20px.

Sukurkite plytelę po keturis elementus eilėje su atstumu tarp elementų 20px.