Masalah Grid Layout pada Flexbox di CSS

Masalah pertama dari grid layout sebenarnya cukup jelas dari awal - sangat tidak nyaman bahwa parent harus secara eksplisit menentukan tinggi. Bagaimanapun, sangat mungkin bahwa jumlah blok akan berubah secara dinamis dan jumlahnya bisa jadi lebih sedikit, atau lebih banyak, dari 9.

Sedangkan masalah kedua akan muncul jika jumlah blok sedemikian rupa sehingga pada baris terakhir terdapat jumlah blok yang tidak cukup. Dalam hal ini baris terakhir akan terlihat buruk:

<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-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ternyata, bahkan secara horizontal, nilai space-between bekerja tidak baik dalam kasus kami.

Kesimpulannya: jika jumlah elemen child Anda selalu konstan dan muat dengan baik di dalam parent, maka grid layout menggunakan space-between adalah hal yang cukup nyaman. Sebaliknya, harus memikirkan sesuatu yang lain.

Diberikan 12 elemen. Buatlah mereka menjadi grid layout dengan 4 elemen per baris dengan lebar setiap elemen 100px dan jarak antar elemen 20px.

Diberikan 12 elemen. Buatlah mereka menjadi grid layout dengan 3 elemen per baris dengan lebar setiap elemen 150px dan jarak antar elemen 10px.