CSS में ऑटो-चौड़ाई वाले ब्लॉकों के साथ टाइल में इंडेंटेशन

मान लीजिए कि हमारे पास एक पंक्ति में चार ब्लॉकों की एक टाइल है:

.child {
	width: 25%;
}

आइए हम अपने ब्लॉकों को क्षैतिज और लंबवत रूप से प्रतिशत में मार्जिन जोड़ें:

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

अभी तक, जो हमने बनाया है वह गलत तरीके से काम करेगा, क्योंकि ब्लॉकों और मार्जिन की कुल चौड़ाई 100% से अधिक है। सही ढंग से काम करने के लिए हमें प्रत्येक ब्लॉक से कुछ हिस्सा काटना होगा, ताकि हमारे मार्जिन के लिए जगह बन सके। आइए इन हिस्सों की गणना करें।

हमारे मामले में, यह पता चलता है कि चार ब्लॉक हैं, और उनके बीच तीन मार्जिन हैं - डेढ़ प्रतिशत each। काटे जाने वाले हिस्से की गणना करने के लिए, कुल मार्जिन को ब्लॉकों की संख्या से विभाजित करना होगा:

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 की दूरी हो।