Ruang Menegak untuk Grid dalam CSS

Sekarang mari kita tambahkan juga ruang menegak. Untuk melakukan ini, kita berikan margin-bottom kepada semua elemen anak dengan nilai 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;
}

Seperti yang kita lihat, semuanya berfungsi dengan baik, kecuali baris terakhir mempunyai ruang dari elemen induk. Selalunya ini tidak kritikal.

Buat grid dengan dua elemen sebaris dengan jarak antara elemen 20px.

Buat grid dengan tiga elemen sebaris dengan jarak antara elemen 20px.

Buat grid dengan empat elemen sebaris dengan jarak antara elemen 20px.