Grid Adaptif Tanpa Ruang dalam CSS

Mari kita buat grid yang akan mempunyai bilangan blok yang berbeza dalam satu baris bergantung pada lebar skrin. Berikut adalah contoh apa yang patut kita dapat:

Mari tulis kod HTML terlebih dahulu:

<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 class="child">9</div>
	<div class="child">10</div>
	<div class="child">11</div>
	<div class="child">12</div>
</div>

Sekarang mari tambah 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 mereka:

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

Jelas sekali, lebar blok mestilah dalam peratusan, supaya apabila skrin berubah, blok menukar lebarnya dengan lancar. Pada titik tertentu pada skrin, kita mesti menukar lebar blok supaya sejumlah blok ini muat dalam satu baris.

Mari tulis kod yang akan meletakkan empat blok dalam satu baris:

@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Dan sekarang mari letakkan tiga blok dalam satu baris:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}

Dan sekarang mari letakkan dua blok dalam satu baris:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}

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;
	border: 1px solid green;
}

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Ubah suai kod saya supaya lebar blok dikira melalui fungsi calc.

Buat grid yang apabila skrin mengecil akan mempunyai empat elemen dalam satu baris terlebih dahulu, kemudian dua elemen dalam satu baris, dan kemudian satu elemen dalam satu baris.

Buat grid yang apabila skrin mengecil akan mempunyai enam elemen dalam satu baris terlebih dahulu, kemudian tiga elemen dalam satu baris, dan kemudian satu elemen dalam satu baris.