💃🏼 👏🏼 🕢 मुसीबतों के बिना ग्रिड 🏢 🐟 🕯️

ग्रिड लेआउट का उपयोग करके अधिकांश साइट बनाई जाती हैं। वे उनका स्पष्ट रूप से उपयोग नहीं कर सकते हैं, लेकिन अगर साइट में दाईं ओर स्थित मुख्य सामग्री और बाईं ओर स्थित साइड ब्लॉक (साइडबार) है, तो यह सबसे सरल ग्रिड है।

यदि आपको अधिक जटिल ग्रिड लागू करने की आवश्यकता है, तो लोग फ्रेमवर्क का उपयोग करने का सहारा लेते हैं। उनका मानना है कि ग्रिड एक अति जटिल चीज है जो सच सीएसएस विशेषज्ञों के लिए सबसे अच्छा है। इस पर विश्वास इस तथ्य से प्रबलित होता है कि अधिकांश ग्रिड फ्रेमवर्क वे बहुत जटिल होते हैं।

इस लेख में, मैं आपको बताऊंगा कि कैसे मैं एक ग्रिड लेआउट तैयार करता हूं। यह इतना मुश्किल नहीं है। और यहां तक कि रबर के जाल बनाना भी मुश्किल नहीं है।

आवरण

स्तंभ आवरण की चौड़ाई उसके माता-पिता की चौड़ाई के बराबर है। हम इसकी चौड़ाई 100% के रूप में ले सकते हैं। चूंकि रैपर का कोई अर्थ नहीं है, इसलिए हम इसके लिए एक साधारण div का उपयोग करेंगे।

<div class="grid"> <!-- 100% wide --> </div>

लाउडस्पीकरों

आइए एक लेआउट से शुरू करें जो अक्सर अभ्यास में उपयोग किया जाता है, जिसमें मुख्य सामग्री 2/3 चौड़ी और एक साइड ब्लॉक 1/3 चौड़ा (माता-पिता की चौड़ाई से) वाला क्षेत्र होता है। ऐसा करने के लिए, हम संबंधित वर्गों के साथ दो div बनाएंगे:

 <div class="grid"> <div class="col-2-3"> Main Content </div> <div class="col-1-3"> Sidebar </div> </div>

उन्हें एक दूसरे के बगल में रखने के लिए, हम उनके लिए फ्लोट संपत्ति सेट करते हैं और चौड़ाई सेट करते हैं। फ्लोट को एक साथ कई कॉलम में सेट किया जा सकता है:

 [class*='col-'] { float: left; }

और चौड़ाई व्यक्तिगत रूप से सेट की गई है:

 .col-2-3 { width: 66.66%; } .col-1-3 { width: 33.33%; }

यह मुसीबतों के बिना ग्रिड के लिए संपूर्ण आधार है।

स्ट्रीम सफाई

चूंकि हमारे आवरण में केवल फ्लोटिंग तत्व (फ्लोट प्रॉपर्टी सेट के साथ कॉलम) होते हैं, इसलिए इसकी ऊंचाई शून्य हो जाती है (क्योंकि फ्लोटिंग तत्व माता-पिता के आकार को प्रभावित नहीं करते हैं। प्रति।) । इसे ठीक करने के लिए, आपको स्ट्रीम साफ़ करने की आवश्यकता है। अभी के लिए, इसे जोड़ें:

 .grid:after { content: ""; display: table; clear: both; }

कॉलम के बीच इंडेंट

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

पहले कदम के रूप में, हम बॉक्स-आकार की संपत्ति का उपयोग बॉर्डर-बॉक्स मूल्य के साथ करेंगे। मैं इसे एक ही बार में सभी तत्वों पर लागू करना पसंद करता हूं।

 *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

अब न तो इंडेंट और न ही बॉर्डर तत्वों के आकार को प्रभावित करेंगे।

दूसरे चरण के रूप में, हम बहुत अंतिम वाले को छोड़कर सभी स्तंभों के दाईं ओर एक निश्चित इंडेंट सेट करते हैं।

 [class*='col-'] { padding-right: 20px; } [class*='col-']:last-of-type { padding-right: 0; }

यह सब सरलतम मामले में कॉलम के बीच इंडेंट करने के लिए है।

बाहरी गद्दी

कॉलम के बीच बाहरी पैडिंग की आवश्यकता है? मैं इसके लिए एक अतिरिक्त वर्ग का उपयोग करता हूं:

 <div class="grid grid-pad">     </div>

सबसे पहले, हम कॉलम रेपर (साथ ही साथ आपके विवेक पर ऊपरी और निचले इंडेंटेशन) के लिए बाएं इंडेंटेशन को जोड़ते हैं:

 .grid-pad { padding: 20px 0 20px 20px; }

फिर हम अंतिम कॉलम में सही इंडेंटेशन वापस करेंगे:

 .grid-pad > [class*='col-']:last-of-type { padding-right: 20px; }

अधिक अलग कॉलम

यह बहुत सरल है:

 .col-1-2 { width: 50%; } .col-1-4 { width: 25%; } .col-1-8 { width: 12.5%; }

आप उनके साथ कुछ भी कर सकते हैं। बस यह मत भूलो कि अंशों का योग एक से अधिक नहीं होना चाहिए। ऐसा करने के लिए, ब्रेनवॉश करना होगा, लेकिन कुछ भी जटिल नहीं है।

सास

मैं इसका अक्सर उपयोग नहीं करता, लेकिन हमारे सभी कोड SCSS / कम्पास के लिए और अधिक कॉम्पैक्ट होते जा रहे हैं:

 * { @include box-sizing(border-box); } $pad: 20px; .grid { background: white; margin: 0 0 $pad 0; &:after { /* Or @extend clearfix */ content: ""; display: table; clear: both; } } [class*='col-'] { float: left; padding-right: $pad; .grid &:last-of-type { padding-right: 0; } } .col-2-3 { width: 66.66%; } .col-1-3 { width: 33.33%; } .col-1-2 { width: 50%; } .col-1-4 { width: 25%; } .col-1-8 { width: 12.5%; } /* Opt-in outside padding */ .grid-pad { padding: $pad 0 $pad $pad; [class*='col-']:last-of-type { padding-right: $pad; } }

मॉड्यूल

ऐसे ग्रिड के साथ काम करते समय, मैं "मॉड्यूल" का उपयोग करना पसंद करता हूं।

 <div class="grid"> <div class="col-2-3"> <article class="module"> stuff </article> <article class="module"> stuff </article> </div> <div class="col-1-3"> <aside class="module"> Sidebar stuff. Sub modules? </aside> </div> </div>

ऐसे टुकड़ों में सामग्री को तोड़ना बहुत सुविधाजनक है। उनमें से एक अतिरिक्त लाभ यह है कि प्रत्येक मॉड्यूल को स्तंभों के किनारों से पाठ को अलग करने के लिए प्रेरित किया जा सकता है।

परिणाम

परिणाम का एक प्रदर्शन यहाँ पाया जा सकता है ।

ब्राउज़रों के साथ तसलीम

कोड IE 9 संस्करण और उससे ऊपर के साथ-साथ अन्य सभी ब्राउज़रों में ठीक काम करता है। यदि आपको IE7 की आवश्यकता है, तो कुछ और करें।

(यह ध्यान दिया जाना चाहिए कि आंशिक प्रतिशत के लिए ओपेरा समर्थन केवल संस्करण 12 में दिखाई दिया - लगभग।)

वैसे, भविष्य में "लचीले ब्लॉकों" (फ्लेक्सबॉक्स, लचीला बॉक्स) का मॉडल ग्रिड लेआउट के कार्यान्वयन को सरल करेगा और यहां तक कि इसे सुधार भी करेगा (विभिन्न तरीकों से, जिसमें मांग पर कॉलम पुनर्निर्माण की क्षमता भी शामिल है)। लेकिन मुझे लगता है कि यह हमें लगभग एक साल और ले जाएगा ताकि हम "लचीले ब्लॉकों" का उपयोग करने के बारे में सोचना भी शुरू कर सकें।

IE8 के लिए समाधान (अनुवादक द्वारा ऐड-ऑन)

मूल लेख में, लेखक ने बताया कि यह विधि Internet Explorer 8 संस्करण में ठीक काम करती है। लेकिन वह गलत था, क्योंकि IE8 छद्म वर्ग का समर्थन नहीं करता है: अंतिम प्रकार का। लेकिन वह छद्म वर्ग का समर्थन करता है: पहला-बच्चा जो हमें इस समस्या को हल करने में मदद करेगा।

सीएसएस में हम बदलते हैं: अंतिम-प्रकार: पहले बच्चे के बजाय और जो कॉलम हम छोड़ते हैं उस पर दाहिने इंडेंटेशन के बजाय:

 [class*='col-'] { padding-left: 20px; } [class*='col-']:first-child { padding-left: 0; }

और उसी तरह, इंडेंटेशन के लिए कोड को संपादित करें:

 .grid-pad { padding: 20px 20px 20px 0; } .grid-pad > [class*='col-']:first-child { padding-left: 20px; }

मुसीबतों के बिना ग्रिड