Sisennykset laatoituksessa, jossa on automaattisen leveyden lohkot CSS:ssä

Oletetaan, että meillä on laatoitus, jossa on neljä lohkoa per rivi:

.child {
	width: 25%;
}

Lisätään lohkoillemme prosentuaaliset sisennykset vaaka- ja pystysuunnassa:

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

Toistaiseksi tekemämme toimii väärin, koska lohkojen ja sisennyksien kokonaisleveys on suurempi kuin 100%. Jotta se toimisi oikein, meidän on leikattava jokaisesta lohkosta pieni pala pois, jotta meillä on tilaa sisennyksillemme. Lasketaan nämä palat.

Meidän tapauksessamme saamme, että lohkoja on neljä, ja niiden välissä on kolme sisennyspaikkaa - puolitoista prosenttia kumpikin. Laskeaksemme poistettavan palan, meidän on jaettava sisennysten kokonaismäärä lohkojen määrällä:

1.5% * 3 / 4 = 1.125

Silloin kunkin lohkon leveys on:

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

Saamme seuraavan koodin:

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

Voimme olla laskematta tätä sisennystä itse, vaan siirtää laskennan calc-funktiolle:

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

Myös lohkon leveyden laskekoon calc-funktio:

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

Aseta lohkoille leveys prosentteina siten, että laatoituksessa on kolme lohkoa per rivi, ja niiden välissä on 3% etäisyys.

Aseta lohkoille leveys prosentteina siten, että laatoituksessa on kuusi lohkoa per rivi, ja niiden välissä on 0.5% etäisyys.

Aseta lohkoille leveys prosentteina siten, että laatoituksessa on neljä lohkoa per rivi, ja lohkojen välissä on 30px etäisyys.

Aseta lohkoille leveys prosentteina siten, että laatoituksessa on viisi lohkoa per rivi, ja lohkojen välissä on 50px etäisyys.