Spasi Vertikal untuk Tile dalam CSS

Sekarang mari kita tambahkan juga spasi vertikal. Untuk melakukan ini, berikan margin-bottom dengan nilai 10px kepada semua elemen anak:

<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;
}

Seperti yang kita lihat, semuanya berfungsi dengan baik, kecuali baris terakhir memiliki spasi dari induknya. Seringkali hal ini tidak kritis.

Buatlah tile dengan dua elemen per baris dan jarak antar elemen sebesar 20px.

Buatlah tile dengan tiga elemen per baris dan jarak antar elemen sebesar 20px.

Buatlah tile dengan empat elemen per baris dan jarak antar elemen sebesar 20px.