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

पिछले पाठ में, हमारी टाइलिंग में ऐसा होता था कि तत्वों की चौड़ाई और उनके रिक्त स्थान का योग parent की चौड़ाई के बराबर होना चाहिए। यह थोड़ा सा सार्वभौमिक नहीं है। आइए ऐसा बनाते हैं कि तत्व स्वचालित रूप से parent की चौड़ाई के अनुसार समायोजित हो जाएं।

मान लीजिए कि हमारे पास इस प्रकार का parent है:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 800px;
	margin: 50px auto;
	border: 1px solid red;
}

मान लीजिए कि इस टाइलिंग के तत्व एक पंक्ति में 4 ब्लॉक खड़े होते हैं:

.child {
	box-sizing: border-box;
	width: 200px;
	height: 100px;
	border: 1px solid green;
}

आइए हम अपने ब्लॉकों की चौड़ाई इस प्रकार परिभाषित करते हैं कि उनमें से प्रत्येक parent का चौथाई हिस्सा घेरता है। इसके लिए हम उनके आकार को 25% पर सेट करते हैं:

.child {
	box-sizing: border-box;
	width: 25%;
	height: 100px;
	border: 1px solid green;
}

ब्लॉकों को प्रतिशत में चौड़ाई दें ताकि टाइलिंग में एक पंक्ति में तीन ब्लॉक हो जाएं।

ब्लॉकों को प्रतिशत में चौड़ाई दें ताकि टाइलिंग में एक पंक्ति में दो ब्लॉक हो जाएं।

ब्लॉकों को प्रतिशत में चौड़ाई दें ताकि टाइलिंग में एक पंक्ति में एक ब्लॉक हो जाए।