Ծալքավորումներ սալիկներում ավտոլայնությամբ բլոկներով CSS-ում

Ենթադրենք, մենք ունենք սալիկներ՝ չորս բլոկով մեկ տողում.

.child {
	width: 25%;
}

Եկեք ավելացնենք մեր բլոկներին տոկոսային ծալքավորումներ հորիզոնական և ուղղահայաց.

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

Մինչև հիմա, այն, ինչ մենք արել ենք, կաշխատի ոչ ճիշտ, քանի որ բլոկների և ծալքավորումների ընդհանուր լայնությունը գերազանցում է 100%-ը: Ճիշտ աշխատանքի համար մենք պետք է յուրաքանչյուր բլոկից կտրենք որոշակի մաս, որպեսզի տեղ ապահովվի մեր ծալքավորումների համար: Եկեք հաշվարկենք այդ մասերը:

Մեր դեպքում ստացվում է, որ կան չորս բլոկ, իսկ նրանց միջև երեք ծալքավորում՝ յուրաքանչյուրը մեկուկես տոկոս: Հանվող մասը հաշվարկելու համար անհրաժեշտ է ընդհանուր ծալքավորման չափը բաժանել բլոկների քանակի վրա.

1.5% * 3 / 4 = 1.125

Այդ դեպքում յուրաքանչյուր բլոկի լայնությունը կլինի.

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

Ստացվում է հետևյալ կոդը.

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

Կարելի է չհաշվարկել այս ծալքավորումը ինքնուրույն, այլ փոխանցել հաշվարկման աշխատանքը calc ֆունկցիային.

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

Բլոկի լայնությունը նույնպես թող հաշվարկի calc ֆունկցիան.

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

Սահմանեք բլոկների լայնությունը տոկոսներով այնպես, որ սալիկներում տողում դառնա երեք բլոկ, իսկ նրանց միջև հեռավորությունը լինի 3%:

Սահմանեք բլոկների լայնությունը տոկոսներով այնպես, որ սալիկներում տողում դառնա վեց բլոկ, իսկ նրանց միջև հեռավորությունը լինի 0.5%:

Սահմանեք բլոկների լայնությունը տոկոսներով այնպես, որ սալիկներում տողում դառնա չորս բլոկ, իսկ բլոկների միջև հեռավորությունը լինի 30px:

Սահմանեք բլոկների լայնությունը տոկոսներով այնպես, որ սալիկներում տողում դառնա հինգ բլոկ, իսկ բլոկների միջև հեռավորությունը լինի 50px: