Indentasi pada Tile dengan Lebar Blok Otomatis di CSS

Misalkan kita memiliki tile dengan empat blok per baris:

.child {
	width: 25%;
}

Mari tambahkan margin horizontal dan vertikal dalam persentase untuk blok-blok kita:

.child {
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Untuk saat ini, apa yang kita lakukan akan bekerja tidak benar, karena total lebar blok dan margin melebihi 100%. Agar bekerja dengan benar kita harus mengurangi sebagian dari setiap blok, agar ada ruang untuk margin kita. Mari kita hitung bagian yang harus dikurangi ini.

Dalam kasus kita, ternyata ada empat blok, dan di antaranya ada tiga margin - masing-masing satu setengah persen. Untuk menghitung bagian yang harus dikurangi, kita perlu membagi total margin dengan jumlah blok:

1.5% * 3 / 4 = 1.125

Maka lebar setiap blok akan sama dengan:

25% - 1.5% * 3 / 4 = 23.875%

Kode yang dihasilkan akan menjadi seperti berikut:

.child {
	width: 23.875%;
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Kita bisa tidak menghitung margin ini sendiri, tetapi menyerahkan pekerjaan penghitungan kepada fungsi calc:

.child {
	width: calc(25% - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Biarkan fungsi calc juga yang menghitung lebar blok:

.child {
	width: calc(100% / 4 - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Atur lebar blok dalam persentase sehingga dalam tile menjadi tiga blok per baris, dengan jarak di antaranya sebesar 3%.

Atur lebar blok dalam persentase sehingga dalam tile menjadi enam blok per baris, dengan jarak di antaranya sebesar 0.5%.

Atur lebar blok dalam persentase sehingga dalam tile menjadi empat blok per baris, dengan jarak di antara blok sebesar 30px.

Atur lebar blok dalam persentase sehingga dalam tile menjadi lima blok per baris, dengan jarak di antara blok sebesar 50px.