W3.CSS उत्तरदायी द्रव ग्रिड
उत्तरदायी ग्रिड
W3.CSS 12 कॉलम रेस्पॉन्सिव फ्लुइड ग्रिड को सपोर्ट करता है।
प्रभाव देखने के लिए पृष्ठ का आकार बदलें!
यह भाग छोटे पर्दे पर 12 कॉलम, मध्यम स्क्रीन पर 4 और बड़े पर्दे पर 3 कॉलमों पर कब्जा करेगा।
यह भाग छोटी स्क्रीन पर 12 कॉलम, मध्यम स्क्रीन पर 8 और बड़ी स्क्रीन पर 9 कॉलम पर कब्जा करेगा।
उदाहरण
<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 columns on a small screen, 4
on a medium screen, and 3 on a large screen.</p>
</div>
<div class="w3-col m8 l9">
<p>12 columns on a small screen, 8
on a medium screen, and 9 on a large screen.</p>
</div>
</div>
उत्तरदायी पंक्तियाँ
W3.CSS का ग्रिड सिस्टम उत्तरदायी है। स्क्रीन के आकार के आधार पर कॉलम स्वचालित रूप से फिर से व्यवस्थित हो जाएंगे: बड़ी स्क्रीन पर यह तीन स्तंभों में व्यवस्थित सामग्री के साथ बेहतर दिख सकता है, लेकिन छोटी स्क्रीन पर यह बेहतर हो सकता है यदि सामग्री एक दूसरे के ऊपर खड़ी हो।
| कक्षा | विवरण |
|---|---|
| w3-पंक्ति | बिना पैडिंग के उत्तरदायी वर्गों के लिए कंटेनर |
| w3-पंक्ति-पैडिंग | प्रतिक्रियाशील वर्गों के लिए कंटेनर, 8px बाएँ और दाएँ पैडिंग के साथ |
| w3-col | 12-स्तंभ प्रतिक्रियाशील ग्रिड में एक स्तंभ को परिभाषित करता है |
w3-col में निम्नलिखित उपवर्ग हैं:
छोटी स्क्रीन के लिए कॉलम (सामान्य स्मार्ट फोन):
| कक्षा | विवरण |
|---|---|
| एस 1 | छोटे स्क्रीन के लिए 12 में से 1 कॉलम (चौड़ाई:08.33%) को परिभाषित करता है |
| एस 2 | छोटे स्क्रीन के लिए 12 में से 2 कॉलम (चौड़ाई:16.66%) परिभाषित करता है |
| एस3 | छोटी स्क्रीन के लिए 12 में से 3 कॉलम (चौड़ाई: 25.00%) परिभाषित करता है |
| एस 4 | छोटी स्क्रीन के लिए 12 में से 4 कॉलम (चौड़ाई:33.33%) परिभाषित करता है |
| s5-s11 | |
| एस12 | 12 में से 12 स्तंभों को परिभाषित करता है (चौड़ाई: 100%)। छोटी स्क्रीन के लिए डिफ़ॉल्ट |
मध्यम स्क्रीन के लिए कॉलम (सामान्य टैबलेट):
| कक्षा | विवरण |
|---|---|
| एम1 | मध्यम स्क्रीन के लिए 12 में से 1 कॉलम (चौड़ाई:08.33%) को परिभाषित करता है |
| एम2 | मध्यम स्क्रीन के लिए 12 में से 2 कॉलम (चौड़ाई:16.66%) परिभाषित करता है |
| एम3 | मध्यम स्क्रीन के लिए 12 में से 3 कॉलम (चौड़ाई:25.00%) परिभाषित करता है |
| एम 4 | मध्यम स्क्रीन के लिए 12 में से 4 कॉलम (चौड़ाई:33.33%) परिभाषित करता है |
| एम5-एम11 | |
| एम12 | 12 में से 12 स्तंभों को परिभाषित करता है (चौड़ाई: 100%)। मध्यम स्क्रीन के लिए डिफ़ॉल्ट |
बड़ी स्क्रीन के लिए कॉलम (सामान्य लैपटॉप और डेस्कटॉप):
| कक्षा | विवरण |
|---|---|
| एल1 | बड़ी स्क्रीन के लिए 12 में से 1 कॉलम (चौड़ाई:08.33%) को परिभाषित करता है |
| एल2 | बड़ी स्क्रीन के लिए 12 में से 2 कॉलम (चौड़ाई:16.66%) को परिभाषित करता है |
| एल3 | बड़ी स्क्रीन के लिए 12 में से 3 कॉलम (चौड़ाई:25.00%) परिभाषित करता है |
| एल4 | बड़ी स्क्रीन के लिए 12 में से 4 कॉलम (चौड़ाई:33.33%) परिभाषित करता है |
| एल5-एल11 | |
| एल12 | 12 में से 12 स्तंभों को परिभाषित करता है (चौड़ाई: 100%)। बड़ी स्क्रीन के लिए डिफ़ॉल्ट) |
अधिक गतिशील और लचीले लेआउट बनाने के लिए उपरोक्त कक्षाओं को जोड़ा जा सकता है।
प्रत्येक वर्ग बड़ा होता है, इसलिए यदि आप छोटी, मध्यम और बड़ी स्क्रीन के लिए समान चौड़ाई सेट करना चाहते हैं, तो आपको केवल छोटे वर्ग को निर्दिष्ट करने की आवश्यकता है। और यदि आप मध्यम और बड़ी स्क्रीन पर समान चौड़ाई चाहते हैं, तो आपको केवल मध्यम वर्ग निर्दिष्ट करने की आवश्यकता है।
हालांकि, यदि आप केवल मध्यम और/या बड़ी कक्षाओं का उपयोग करते हैं, तो चौड़ाई हमेशा छोटी स्क्रीन पर 100% में बदल जाएगी।
नोट: कॉलम की संख्या हमेशा प्रत्येक पंक्ति के लिए 12 जोड़नी चाहिए (6+6, 3+3+6, 9+3, आदि)!
दो समान कॉलम
सभी स्क्रीन आकारों पर दो समान-चौड़ाई वाले कॉलम (50%/50%):
s6
s6
उदाहरण
<div class="w3-row">
<div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s6 w3-dark-grey w3-center"><p>s6</p></div>
</div>
दो असमान कॉलम
सभी स्क्रीन आकारों पर असमान चौड़ाई (25%/75%) के दो कॉलम:
एस3
s9
उदाहरण
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s3</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s9</p></div>
</div>
तीन समान कॉलम
सभी स्क्रीन आकारों पर तीन समान-चौड़ाई वाले कॉलम (33.3%/33.3%/33.3%):
एस 4
एस 4
एस 4
उदाहरण
<div class="w3-row">
<div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
<div class="w3-col s4
w3-red w3-center"><p>s4</p></div>
</div>
तीन असमान कॉलम
टैबलेट, लैपटॉप और डेस्कटॉप पर तीन विभिन्न-चौड़ाई वाले कॉलम (25%/50%/25%)। मोबाइल फोन पर, कॉलम स्वचालित रूप से ढेर हो जाएंगे (100% चौड़ाई):
एम3
एम6
एम3
उदाहरण
<div class="w3-row">
<div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
<div class="w3-col
m6 w3-dark-grey w3-center"><p>m6</p></div>
<div class="w3-col
m3
w3-red w3-center"><p>m3</p></div>
</div>
नोट: यह उदाहरण w3-क्वार्टर (m3), w3-हाफ (m6), w3-क्वार्टर (m3) का उपयोग करने जैसा ही है, जिसे आपने W3.CSS रिस्पॉन्सिव चैप्टर में सीखा था।
छह कॉलम
टैबलेट, लैपटॉप और डेस्कटॉप पर छह समान-चौड़ाई वाले कॉलम (प्रत्येक में 16%)। मोबाइल फोन पर, कॉलम स्वचालित रूप से ढेर हो जाएंगे (100% चौड़ाई):
एम2
एम2
एम2
एम2
एम2
एम2
उदाहरण
<div class="w3-row">
<div class="w3-col m2 w3-green
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-red
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-blue
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-dark-grey
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-black
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-purple
w3-center"><p>m2</p></div>
</div>
मिश्रित: मोबाइल और लैपटॉप
गतिशील और लचीला लेआउट बनाने के लिए आप कक्षाओं को जोड़ सकते हैं। यह उदाहरण बड़ी स्क्रीन पर 83.34%/16.66% (l10, l2) विभाजन और छोटी स्क्रीन पर 50%/50% (s6, s6) विभाजन के साथ दो कॉलम लेआउट का उत्पादन करेगा:
एल10 एस6
एल2 एस6
उदाहरण
<div class="w3-row">
<div class="w3-col l10 s6 w3-pink
w3-center"><p>l10 s6</p></div>
<div class="w3-col l2 s6
w3-dark-grey w3-center"><p>l2 s6</p></div>
</div>
मिश्रित: मोबाइल, टैबलेट और लैपटॉप
यह उदाहरण बड़ी स्क्रीन पर 25%/58.34%/16.66% (l3, l7, l2) विभाजित, मध्यम स्क्रीन पर 50%/25%/25% (m6, m3, m3) विभाजन के साथ तीन कॉलम लेआउट का उत्पादन करेगा और 33.3%/33.3%/33.3% (s4, s4, s4) छोटे पर्दे पर विभाजित:
एल3 एम6 एस4
एल7 एम3 एस4
एल2 एम3 एस4
उदाहरण
<div class="w3-row">
<div class="w3-col l3 m6 s4 w3-green w3-center"><p>l3 m6 s4</p></div>
<div class="w3-col l7 m3 s4
w3-dark-grey w3-center"><p>l7 m3 s4</p></div>
<div class="w3-col l2
m3 s4 w3-red w3-center"><p>l2 m3 s4</p></div>
</div>
W3-पंक्ति और w3-पंक्ति-पैडिंग के बीच अंतर
W3-पंक्ति वर्ग एक गद्देदार-रहित कंटेनर को परिभाषित करता है, जबकि w3-पंक्ति-पैडिंग वर्ग प्रत्येक कॉलम में 8px बाएँ और दाएँ पैडिंग जोड़ता है:
w3-पंक्ति:
w3-पंक्ति-पैडिंग:
उदाहरण
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
w3-rest . का उपयोग करना
w3-rest क्लास एक शक्तिशाली और लचीला वर्ग है जो ग्रिड कॉलम के बचे हुए हिस्से का उपयोग करेगा।
150पीएक्स
विश्राम
75px
विश्राम
100px
100px
विश्राम
त्रिमास
80px
विश्राम
त्रिमास
त्रिमास
त्रिमास
35%
विश्राम
आराम का उपयोग कर उदाहरण
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
वर्ग = "w3-rest" का उपयोग करने वाला तत्व हमेशा स्रोत कोड में अंतिम तत्व होना चाहिए।
प्रतिशत का उपयोग करना
कॉलम की विशिष्ट चौड़ाई निर्धारित करने के लिए CSS चौड़ाई गुण का उपयोग करें।
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
उदाहरण
<div class="w3-row">
<div class="w3-col
w3-container w3-green"
style="width:20%"><p>20%</p></div>
<div
class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
<div
class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div>