Layout Ubin dengan Lebar Blok Otomatis di CSS

Dalam pelajaran sebelumnya, dalam layout ubin kita, ternyata lebar elemen dan jaraknya harus berjumlah sama dengan lebar induknya. Hal ini agak kurang universal. Mari kita buat agar elemen-elemennya menyesuaikan diri secara otomatis terhadap lebar induknya.

Misalkan kita memiliki induk seperti ini:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 800px;
	margin: 50px auto;
	border: 1px solid red;
}

Misalkan elemen-elemen dalam layout ubin ini berjumlah 4 blok per baris:

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

Mari atur lebar blok kita sehingga setiap blok menempati seperempat dari induknya. Untuk melakukan ini, atur ukurannya menjadi 25%:

.child {
	box-sizing: border-box;
	width: 25%;
	height: 100px;
	border: 1px solid green;
}

Atur lebar blok dalam persentase sehingga dalam ubin menjadi tiga blok per baris.

Atur lebar blok dalam persentase sehingga dalam ubin menjadi dua blok per baris.

Atur lebar blok dalam persentase sehingga dalam ubin menjadi satu blok per baris.