Inden dalam Grid dengan Lebar Blok Auto dalam CSS

Katakan kita mempunyai grid dengan empat blok sebaris:

.child {
	width: 25%;
}

Mari tambahkan inden peratusan untuk blok kita secara mendatar dan menegak:

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

Setakat ini, apa yang kita buat tidak akan berfungsi dengan betul, kerana jumlah lebar blok dan inden melebihi 100%. Untuk berfungsi dengan betul kita perlu mengurangkan sebahagian daripada setiap blok untuk memberi ruang kepada inden kita. Mari kita kira bahagian tersebut.

Dalam kes ini, kita mempunyai empat blok, dan tiga inden di antaranya - setiap satu 1.5 peratus. Untuk mengira jumlah yang perlu dikurangkan, kita perlu membahagikan jumlah inden dengan bilangan blok:

1.5% * 3 / 4 = 1.125

Maka lebar setiap blok akan sama dengan:

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

Kod yang terhasil adalah seperti berikut:

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

Kita tidak perlu mengira inden ini sendiri, tetapi boleh menyerahkan kerja pengiraan 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 mengira 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;
}

Tetapkan lebar blok dalam peratusan supaya grid mempunyai tiga blok sebaris, dengan jarak 3% di antaranya.

Tetapkan lebar blok dalam peratusan supaya grid mempunyai enam blok sebaris, dengan jarak 0.5% di antaranya.

Tetapkan lebar blok dalam peratusan supaya grid mempunyai empat blok sebaris, dengan jarak 30px di antara blok.

Tetapkan lebar blok dalam peratusan supaya grid mempunyai lima blok sebaris, dengan jarak 50px di antara blok.