Tile Responsif Tanpa Jarak dalam CSS

Mari kita buat tile yang akan memiliki jumlah blok yang berbeda dalam satu baris tergantung pada lebar layar. Berikut adalah contoh dari apa yang harus kita dapatkan:

Mari tulis kode 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 tambahkan gaya untuk induk blok:

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

Sekarang atur gaya untuk blok itu sendiri, tanpa mengatur lebarnya:

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

Jelas bahwa lebar blok harus dalam persentase, sehingga ketika layar berubah, blok secara halus mengubah lebarnya. Pada saat yang sama, pada titik-titik tertentu layar kita harus mengubah lebar blok sehingga sejumlah blok ini muat dalam satu baris.

Mari tulis kode yang akan menempatkan empat blok dalam satu baris:

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

Dan sekarang tempatkan tiga blok dalam satu baris:

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

Dan sekarang tempatkan dua blok dalam satu baris:

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

Satu blok per baris:

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

Mari kumpulkan semua kode 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 kode saya sehingga lebar blok dihitung melalui fungsi calc.

Buatlah tile yang ketika layar mengecil akan menampilkan empat elemen dalam satu baris, lalu dua elemen dalam satu baris, dan kemudian satu elemen per baris.

Buatlah tile yang ketika layar mengecil akan menampilkan enam elemen dalam satu baris, lalu tiga elemen dalam satu baris, dan kemudian satu elemen per baris.