Grid Adaptif dengan Ruang dalam CSS

Sekarang mari kita buat grid dengan ruang. Berikut adalah contoh hasil yang sepatutnya kita perolehi:

Pertama, mari buat gaya untuk elemen induk blok:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}

Sekarang mari tetapkan gaya untuk blok itu sendiri, tanpa menetapkan lebar, tetapi menetapkan margin bawah dalam peratusan:

.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	margin-bottom: 1.5%;
	border: 1px solid green;
}

Sekarang tulis kod yang akan meletakkan empat blok dalam satu baris, dengan menetapkan ruang yang sepadan:

@media (min-width: 1000px) {
	.child {
		width: calc(100% / 4 - 1.5% * 3 / 4);
	}
	.child:not(:nth-child(4n)) {
		margin-right: 1.5%;
	}
}

Dan sekarang mari letakkan tiga blok dalam satu baris:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: calc(100% / 3 - 1.5% * 2 / 3);
	}
	.child:not(:nth-child(3n)) {
		margin-right: 1.5%;
	}
}

Dan sekarang mari letakkan dua blok dalam satu baris:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: calc(100% / 2 - 1.5% * 1 / 2);
	}
	.child:not(:nth-child(2n)) {
		margin-right: 1.5%;
	}
}

Satu blok dalam satu baris:

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}

Mari kumpulkan semua kod bersama:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}
.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	margin-bottom: 1.5%;
	border: 1px solid green;
}

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: calc(100% / 2 - 1.5% * 1 / 2);
	}
	.child:not(:nth-child(2n)) {
		margin-right: 1.5%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: calc(100% / 3 - 1.5% * 2 / 3);
	}
	.child:not(:nth-child(3n)) {
		margin-right: 1.5%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: calc(100% / 4 - 1.5% * 3 / 4);
	}
	.child:not(:nth-child(4n)) {
		margin-right: 1.5%;
	}
}

Buat grid yang apabila skrin mengecil akan mempunyai lapan elemen dalam satu baris terlebih dahulu, kemudian empat elemen dalam satu baris, kemudian dua elemen dalam satu baris. Biarkan ruang antara elemen ialah 0.75%.

Ubah suai tugas sebelumnya supaya ruang antara elemen ialah nilai tetap 20px.