कैसे सीएसएस ग्रिड सामग्री संरचना में परिवर्तन करता है

जिस किसी ने भी कम से कम वेबसाइट विकास किया है, वह जानता है कि लेआउट को नियंत्रित करने के लिए <div> टैग एक महत्वपूर्ण बिल्डिंग ब्लॉक है।

HTML5 ने इसकी मदद के लिए नए अर्थ तत्व प्रस्तुत किए। और यद्यपि वे भाषा के लिए एक शानदार जोड़ हैं, वे हमारे सूप को <div> तत्वों के साथ सजाने की तरह हैं।



सीएसएस ग्रिड के आगमन के साथ, हमें अब पृष्ठ संरचना या और अधिक जटिल घटक बनाने के लिए <div> तत्वों पर भरोसा करने की आवश्यकता नहीं है। संरचना शाब्दिक रूप से मूल तत्व द्वारा निर्धारित की जाती है, न कि यह कि सामग्री इसके अंदर कैसे स्थित है।

इसका मतलब यह है कि हम एक अच्छा सरल लेआउट प्राप्त कर सकते हैं जो सामग्री को इस बात पर ध्यान दिए बिना कि यह मूल रूप से <div> तत्वों का उपयोग करके कैसे व्यवस्थित किया गया था।

---

CSS ग्रिड जटिल हो सकता है, लेकिन Flexbox भी

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

सीएसएस ग्रिड तकनीक कई नए गुणों और मूल्यों को पेश करती है, इसलिए हां, एक सीखने की अवस्था है। लेकिन फ्लेक्सबॉक्स भी काफी जटिल है।

क्या आप width बजाय flex-basis संपत्ति का उपयोग करने के लाभों के बारे में बात कर सकते हैं? यदि हम इसे स्पष्ट रूप से परिभाषित नहीं करते हैं तो फ्लेक्सबॉक्स फ्लेक्स तत्वों की चौड़ाई की गणना कैसे करता है?

उदाहरण के लिए, यदि आप किसी ऐसे व्यक्ति से नीचे का उदाहरण दिखाते हैं, जिसने कभी फ्लेक्सबॉक्स का उपयोग नहीं किया है, तो आप इस तथ्य को कैसे समझाते हैं कि इसमें दोनों स्तंभों के लिए एक ही लेआउट और शैलियाँ हैं? मामलों को बदतर बनाने के लिए, दोनों मामलों में दूसरा कॉलम 50% चौड़ा है। जाहिर है, 50% की चौड़ाई वास्तव में तत्व का आकार 50% तक निर्धारित नहीं करती है।


"ठीक है, यह सब इस तथ्य से शुरू होता है कि कंटेनर में पर्याप्त जगह नहीं होने पर तत्व संकुचित हो जाते हैं, इसलिए, भले ही हम तत्व की चौड़ाई = 50% निर्धारित करते हैं, इसमें पर्याप्त स्थान नहीं है, इसलिए यह कंटेनर में निचोड़ने के लिए संपीड़ित करना शुरू कर देता है, क्योंकि अन्य <div> अधिक स्थान की आवश्यकता है। ब्लॉक के लिए 50% अधिक आदर्श आकार की संभावना है, लेकिन वास्तविक आकार की नहीं। "

इस प्रकार, उपरोक्त उदाहरण में, पहले ब्लॉक की सामग्री इतनी बड़ी है कि यह एक समस्या पैदा करती है, क्योंकि, एक फ्लेक्स तत्व के रूप में, डिफ़ॉल्ट रूप से यह सामग्री को समायोजित करने के लिए सिकुड़ जाता है। इस उदाहरण में, इस तत्व की बहुत सारी सामग्री है, इसलिए ...

तो हाँ, फ्लेक्सबॉक्स महान है और लेआउट बनाने का एक बड़ा काम करता है, लेकिन कृपया मुझे यह नहीं बताएं कि यह सरल है। जैसे ही आप आदर्श उदाहरणों से कार्य कार्यों की ओर बढ़ते हैं, ऐसा व्यवहार अक्सर सहज ज्ञान से दूर होता है, और कभी-कभी यह अजीब तरह से अजीब हो सकता है।

एक ग्रिड इस मायने में जटिल है कि इसमें कई नए गुण और मूल्य शामिल हैं, लेकिन वे हमें फ्लेक्सबॉक्स की तुलना में बहुत अधिक नियंत्रण देते हैं।

इस लेख में, मैं इस बात पर विचार करना चाहूंगा कि यह अतिरिक्त स्तर नियंत्रण हमारे मार्कअप को आसान बनाने में कैसे मदद करता है और हमें कम कोड लिखने की अनुमति देता है, यहां तक ​​कि इसके विचित्र कार्यों के एक नंबर का उपयोग करने के बारे में भी जानने के बिना सभी को।

फ्लेक्सबॉक्स सीमाएँ

यहां तक ​​कि अगर हम एक साधारण घटक लेते हैं और इसे फ्लेक्सबॉक्स का उपयोग करके बनाते हैं, इस तथ्य के कारण कि यह केवल 1 आयाम में कार्य करता है (फ्लेक्स तत्व या तो पंक्तियाँ या स्तंभ हैं, वे दोनों नहीं हो सकते हैं), हमारे पास बहुत कुछ है पंक्तियों को बनाने के लिए उपयोग किए जाने वाले तत्वों की संख्या, जिन्हें तब स्तंभों में विभाजित किया जा सकता है।

उदाहरण के लिए, यदि हम इस तरह से एक कार्ड पर काम कर रहे हैं:



यह एक जटिल लेआउट नहीं है, लेकिन हमें अभी भी इसे बनाने के लिए अपनी सामग्री को एक विशिष्ट तरीके से व्यवस्थित करने की आवश्यकता है।



इस स्थिति में पीले और नारंगी ब्लॉकों की आवश्यकता होती है ताकि प्रदर्शन को जोड़ते समय: .card तत्व (लाल ब्लॉक) के लिए फ्लेक्स संपत्ति, दो कॉलम बनाए जाएं। इस प्रकार, सभी सामग्री की संरचना के लिए, हमें मार्कअप मिलता है जो कुछ इस तरह दिखता है:

 <div class="card"> <div class="profile-sidebar"> <!--       --> </div> <div class="profile-body"> <!-- , ,  --> </div> </div> 

एक बार जब आप समझ जाते हैं कि फ्लेक्सबॉक्स कैसे काम करता है, तो इस संरचना को समझना आसान होगा।

जब हम display: flex जोड़ते display: flex .card तत्व के लिए display: flex प्रॉपर्टी, हमें दो कॉलम मिलते हैं, जिसके बाद हमें उनमें से प्रत्येक को अलग से .card करने की आवश्यकता होगी।

यहां सभी शैलियों के साथ एक कार्यशील उदाहरण दिया गया है:


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

सीएसएस ग्रिड के साथ सब कुछ सरल करें

चूंकि सीएसएस ग्रिड दो-आयामी है, यह हमें एक ही समय में पंक्तियों और स्तंभों को बनाने की अनुमति देता है, जिसका अर्थ है कि ग्रिड कंटेनर (जिस पर हम display: grid निर्धारित करते display: grid संपत्ति) के अंदर लेआउट पर पूरा नियंत्रण है।

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

 <div class="card"> <img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img"> <ul class="social-list"> ... </ul> <h2 class="profile-name">Ramsey Harper</h2> <p class="profile-position">Graphic Designer</p> <p class="profile-info">Lorem ipsum ...</p> </div> 

मार्कअप के दृष्टिकोण से, यह अधिक समझ में नहीं आता है?

वर्ग .card साथ एक तत्व है जिसमें हम इसकी तत्काल सामग्री डालते हैं। हमें तत्वों की संरचना और लेआउट के बारे में चिंता करने की आवश्यकता नहीं है, हम बस उस सामग्री को डालते हैं जिसकी हमें ज़रूरत है और आगे बढ़ते हैं।

लेआउट को संरचित करना

फ्लेक्सबॉक्स का उपयोग करते समय, हमें अभी भी लेआउट की संरचना करने की आवश्यकता है, हालांकि ग्रिड की बारीकियों के कारण, यह थोड़ा अलग दिखता है।

यह उन स्थितियों में से एक है जिसमें लोग तर्क दे सकते हैं कि ग्रिड अधिक जटिल है, लेकिन वास्तव में, मैं सामग्री के प्रत्येक टुकड़े के चारों ओर ब्लॉक खींचता हूं।



फ्लेक्सबॉक्स का उपयोग करते हुए, हमने दो ब्लॉक बनाए जो स्तंभ के रूप में बाहर खड़े थे। ग्रिड का उपयोग करते समय, इसके बजाय, हम मूल तत्व के लिए पूरे ग्रिड को कॉन्फ़िगर करते हैं, और फिर उन बाल तत्वों को इंगित करते हैं जहां इस ग्रिड पर बैठना है।

ग्रिड स्थापित करने के लिए, हम कुछ इस तरह कर सकते हैं:

 .card { display: grid; grid-template-columns: 1fr 3fr; } 

माप की fr इकाई ग्रिड के लिए अद्वितीय है, और उपलब्ध स्थान के अनुपात को इंगित करता है। यह उपयोग फ्लेक्सबॉक्स में दो कॉलम स्थापित करने और क्रमशः 25% और 75% की चौड़ाई निर्धारित करने के समान है।

ग्रिड पर आइटम रखना

शायद इस तथ्य के कारण कि कई सालों तक मैंने मार्कअप बनाने के लिए फ्लोट का उपयोग किया था, अब ऐसी परिस्थितियां हैं जिनमें तत्व बस उसी स्थान पर स्थित हैं जहां उनकी आवश्यकता होती है जैसे कि थोड़ा जादू लगता है।

आप प्रत्येक तत्व के लिए grid-row और grid-column उपयोग कर सकते हैं ताकि हम जहां चाहें वहां जा सकें, लेकिन जितना अधिक मैं ग्रिड का उपयोग करता हूं, उतना ही मैं grid-template-areas संपत्ति के साथ प्यार में पड़ जाता हूं और क्षेत्र परिभाषाओं का उपयोग करके तत्व grid-template-areas हूं।

यह दृष्टिकोण थोड़ा अधिक समय लेता है, लेकिन यह इसके लायक है, खासकर जब हम एक अनुकूली डिजाइन बनाते हैं (हम जल्द ही इस पर पहुंचेंगे)।

सबसे पहले हमें .card तत्व के लिए grid-template-areas को परिभाषित करने की आवश्यकता है, जिसके बाद हम इन क्षेत्रों में सभी बच्चे तत्वों को असाइन कर सकते हैं:

 .card { ... display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 2em; grid-template-areas: "image name" "image position" "social description"; } .profile-name { grid-area: name; } .profile-position { grid-area: position; } .profile-info { grid-area: description; } .profile-img { grid-area: image; } .social-list { grid-area: social; } 

नीचे दिए गए उदाहरण में, आप कार्रवाई में यह सब देख सकते हैं:

यह इतना आसान है

मुझे grid-template-areas का उपयोग करने का एक कारण यह है कि यदि कोई अन्य व्यक्ति कोड को देखता है, तो वे तुरंत समझ जाएंगे कि क्या हो रहा है ...

यदि कोई आपको वह कोड दिखाता है जिसमें grid-row और grid-column को संख्या और span का उपयोग करके निर्दिष्ट किया जाता है, तो यह गणना करना और समझना काफी सरल है कि वे कहाँ और कैसे स्थित तत्व होंगे। साधारण लेआउट के लिए या कुछ स्थानों पर स्पैन का उपयोग करने के लिए, मैं उनके उपयोग को उचित मानता हूं, लेकिन बहुत अधिक सुखद, बस मूल तत्व के कोड को देखते हुए, तुरंत समझें कि पूरा लेआउट कैसा दिखेगा ।

ग्रिड का उपयोग करते समय, किसी तत्व के वास्तविक आकार को जानना आसान होता है

हमारे पहले उदाहरण में, जहां हमने फ्लेक्स तत्वों में से एक = 50% की चौड़ाई निर्धारित की, वास्तव में यह 50% के बराबर नहीं था। यदि आप समझते हैं कि ऐसा क्यों हुआ, महान, लेकिन कभी-कभी यह अभी भी कष्टप्रद हो सकता है। यह चारों ओर से गुजरना काफी आसान है, लेकिन ग्रिड का उपयोग करते समय यह बहुत छोटी समस्या बन जाती है।

चूंकि हम पूरे लेआउट को परिभाषित करते हैं, इसलिए हम यह भी निर्दिष्ट करते हैं कि अंतरिक्ष यात्रियों को कितना कब्जा करना चाहिए।

और निश्चित रूप से, हमारे पास हमारे निपटान में minmax() फ़ंक्शन और मापने की इकाइयां हैं, जो पानी को थोड़ा हिलाते हैं, क्योंकि वे हमें आकारों को अधिक लचीले ढंग से परिभाषित करने की अनुमति देते हैं (जैसे कि हम ऊपर दिए गए उदाहरण में उपयोग करते हैं), लेकिन यहां तक ​​कि हमारे पास अभी भी पूर्ण नियंत्रण नहीं है उनके लचीलेपन पर, और यह सब माता-पिता द्वारा नियंत्रित किया जाता है, माता-पिता के लिए कुछ गुणों को निर्धारित करने की आवश्यकता के बिना, और कुछ बच्चों के लिए।

सीमित परिवर्तन

यदि हम फ्लेक्सबॉक्स उदाहरण को देखते हैं, तो हम HTML मार्कअप को बदले बिना इसे नीचे दिए गए लेआउट की तरह नहीं बना सकते हैं:



हमने खुद को इस बात तक सीमित रखा कि हम <div> का उपयोग करते हुए तत्वों को एक साथ कैसे समूहीकृत करें। हमें लेआउट काम करने के लिए इन <div> का उपयोग करना था, लेकिन अब यह हमारे लिए एक बाधा बन गया है।

एक ही स्तर पर स्थित हमारे ग्रिड कंटेनर के बच्चों के साथ, आप सब कुछ कर सकते हैं । और एक अतिरिक्त बोनस के रूप में, चूंकि हमने grid-template-areas का उपयोग करके सब कुछ कॉन्फ़िगर किया है, इसलिए ये परिवर्तन करना बहुत आसान है।

 .card { /*   grid-template-areas: "image name" "image position" "social description"; */ /*   */ grid-template-areas: "image name" "image position" "image social" ". description"; } 

इस तरह से grid-template-areas साथ खेलते हुए, आप सामाजिक नेटवर्क के आइकन को जल्दी और आसानी से स्थानांतरित कर सकते हैं जहां हम उन्हें देखना चाहते हैं (अंतिम भाग में डॉट एक खाली सेल को इंगित करता है)।

मीडिया के प्रश्नों के साथ काम करने पर यह जीवन को आसान बनाता है।

जैसा कि मैंने कई बार उल्लेख किया है, grid-template-areas उपयोग करते समय यह मामला है। हम केवल माता-पिता के गुणों का उपयोग करके अपने लेआउट को पूरी तरह से नियंत्रित कर सकते हैं:

 .card { /*     */ display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 2em; grid-template-areas: "name" "image" "social" "position" "description"; } .profile-name { grid-area: name;} .profile-position { grid-area: position; } .profile-info { grid-area: description; } .profile-img { grid-area: image; } .social-list { grid-area: social; } /*      */ @media (min-width: 600px) { .card { text-align: left; grid-template-columns: 1fr 3fr; grid-template-areas: "image name" "image position" "social description"; } .profile-name::after { margin-left: 0; } } 

नीचे दिए गए कोडपैन में पूरी तरह से स्टाइल उदाहरण है। आप इसका अध्ययन कर सकते हैं, ग्रिड क्षेत्रों के साथ खेल सकते हैं और देख सकते हैं कि लेआउट को पूरी तरह से पुनर्निर्माण करना कितना आसान है।

फ्लेक्सबॉक्स का अभी भी अपना दायरा है

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

 .header { display: flex; justify-content: space-between; } 

यही बात <ul> पर लागू होती है, जिसका उपयोग हम नेविगेशन के लिए करते हैं, बस तत्वों को एक दूसरे का अनुसरण करने के लिए, या, जैसा कि आपने उदाहरण के साथ देखा कि हमने जिस कार्ड की जांच की, वह .social-list लिए आदर्श है।

सरल घटकों के लिए जहां हमें एक जटिल लेआउट की आवश्यकता नहीं है, यह वास्तव में अच्छी तरह से काम करता है। लेकिन अधिक से अधिक, मैं ग्रिड की ओर एक आंदोलन को नोटिस करता हूं, कभी-कभी उनके लिए स्पष्ट आवश्यकता के कारण, कभी-कभी क्योंकि मैं minmax() फ़ंक्शन या माप fr की इकाइयों का उपयोग करना चाहता हूं।

लेकिन अंत में, मुझे लगता है कि ग्रिड के बारे में सबसे अच्छी बात हमारे मार्कअप को बहुत सरल बनाने की क्षमता है।

हम अभी भी <div> का उपयोग करने के लिए मजबूर हैं, लेकिन ग्रिड के लिए धन्यवाद, हम उन्हें कम और कम उपयोग कर सकते हैं।

निष्कर्ष में

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

फ्लेक्सबॉक्स का उपयोग करते समय, सबसे बड़ा हम बदल सकते हैं flex-direction । ग्रिड का उपयोग करके, हम जल्दी से और बस पूरी तरह से एक घटक के डिजाइन को बदल सकते हैं।

फ्लेक्सबॉक्स और ग्रिड दोनों में बहुत अधिक विशेषताएं हैं। प्रत्येक का उद्देश्य होता है, लेकिन अगर आपको लगता है कि आप नहीं जानते हैं कि कौन सा दृष्टिकोण लेना है, या सामान्य रूप से उत्तरदायी डिजाइन को समझने की कोशिश कर रहे हैं, तो मैंने हाल ही में स्क्रिम्बा में एक पाठ्यक्रम की घोषणा की है जो उत्तरदायी डिज़ाइन डिज़ाइन बूटकैंप नामक उत्तरदायी डिज़ाइन में जाता है।