ग्रिड या फ्लेक्सबॉक्स?

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



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

इस सवाल के जवाब के बीच, जो, मिशेल के अनुसार, काफी उम्मीद थी, राहेल एंड्रयू और जेन सीमन्स के मूल्यवान विचारों को नोट करना संभव था।

राहेल ने कहा कि फ्लेक्सबॉक्स प्रौद्योगिकी को एक आयामी लेआउट विकसित करने के लिए डिज़ाइन किया गया है, जो बताता है कि तत्वों को एक पंक्ति या स्तंभ में कैसे व्यवस्थित किया जाता है। और ग्रिड तकनीक को दो-आयामी लेआउट विकसित करने के लिए डिज़ाइन किया गया है जिसमें पंक्तियाँ और स्तंभ दोनों शामिल हैं।

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

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

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

आपको कितनी गणनाएँ करनी हैं?

यहाँ क्रिस के सवाल का जवाब है। मैंने तब कहा था कि अगर मुझे ऐसा लगता है कि लेआउट बनाते समय आपको अक्सर calc() सीएसएस फ़ंक्शन का उपयोग करना पड़ता है, तो इसका आमतौर पर मतलब है कि मुझे ग्रिड तकनीक की आवश्यकता है, फ्लेक्सबॉक्स की नहीं।

यदि आपको अक्सर पंक्तियों और स्तंभों के आकार की सही गणना करने के लिए calc() फ़ंक्शन का सहारा लेना पड़ता है (यदि आपको आंतरिक क्षेत्रों को ध्यान में रखने की आवश्यकता है, उदाहरण के लिए), तो यह अक्सर इंगित करता है कि आपको यूनिट के उपयोग के बाद से ग्रिड तकनीक का उपयोग करने पर विचार करना चाहिए। मापने वाला फ्रैम आपके जीवन fr बहुत सरल बना fr । हालांकि, एक सामान्य सिफारिश के रूप में, यह सलाह काफी व्यवहार्य है, यह क्या हो रहा है की पूरी तस्वीर का वर्णन नहीं करता है। कभी-कभी उन मामलों में ग्रिड की भी आवश्यकता हो सकती है जब लेआउट का निर्माण करते समय calc() फ़ंक्शन का उपयोग नहीं किया जाता है। उदाहरण के लिए, ऐसी स्थिति में जहां हम एक निश्चित चौड़ाई के साथ द्वि-आयामी लेआउट के बारे में बात कर रहे हैं, जिनमें से तत्व 200 पिक्सेल चौड़े हैं। इस तरह के एक लेआउट को विकसित करते समय, तत्वों की चौड़ाई का पता लगाने के लिए calc() फ़ंक्शन की आवश्यकता नहीं होती है, लेकिन साथ ही, ग्रिड के आधार पर निर्मित लेआउट का व्यवहार बेहद उपयोगी हो सकता है। इसी तरह, ऐसी परिस्थितियां संभव हैं जिनमें फ्लेक्सबॉक्स का उपयोग करना सबसे अच्छा है और अनिवार्य रूप से calc() फ़ंक्शन का उपयोग करना है। नतीजतन, हम यहां जिस बारे में बात कर रहे हैं, वह सबसे कठोर नियम के रूप में नहीं माना जाता है, जैसे: " calc() और फ्लेक्सबॉक्स का उपयोग करें? इसलिए आपको ग्रिड पर जाने की जरूरत है, ”लेकिन सोचने के लिए जानकारी के रूप में।

एक आयाम या दो?

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


ग्रिड उदाहरण

तत्वों को कैसे व्यवहार करना चाहिए?

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

मान लें कि हमारे पास एक ग्रिड-आधारित लेआउट है जो निम्नलिखित विशेषताओं में भिन्न है: तीन तत्वों की तीन पंक्तियों में बाएं से दाएं स्थित नौ तत्व हैं, तत्वों के बीच 20 पिक्सेल हैं। इस तरह के लेआउट को ग्रिड और फ्लेक्सबॉक्स दोनों का उपयोग करके बनाया जा सकता है। इस तरह के ग्रिड-आधारित लेआउट का वर्णन करने के लिए कोड बहुत सरल और साफ है:

 .grid {   display: grid;   grid-template-columns: repeat(3, 1fr);   grid-auto-rows: 200px;   /*     ,   ,      .        , `auto`,  ,        . */   gap: 20px; } 

इस तरह के लेआउट का उपयोग इस तथ्य की ओर जाता है कि तत्वों को स्वचालित रूप से रखा जाता है, जबकि हमें कुछ और करने की आवश्यकता नहीं है। यदि हम खुद को सोचने का समय देते हैं, तो हम ग्रिड auto-fit() और minmax() उपयोग कर सकते हैं, जो हमें मीडिया प्रश्नों का उपयोग किए बिना पूरी तरह से उत्तरदायी लेआउट प्राप्त करने की अनुमति देगा। इस उदाहरण को खोलें, विंडो का आकार बदलने की कोशिश करें और देखें कि क्या होता है।


ग्रिड उदाहरण

आप इस वीडियो को देखकर इस तकनीक के बारे में और साथ ही कुछ अन्य उपयोगी बातें जान सकते हैं।

यदि हमने Flexbox का उपयोग करके एक समान लेआउट बनाया है, तो, केवल वर्णित उदाहरण के विपरीत, हमें तत्वों और कंटेनर दोनों को स्टाइल करने की आवश्यकता होगी:

 .grid {   display: flex;   flex-wrap: wrap;   margin: -10px;   width: calc(100% + 20px); } .item {   width: calc((100% / 3) - 20px);   flex: 0 0 auto;   margin: 0 10px 20px 10px; } 

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

यहाँ CodePen पर एक उदाहरण दिया गया है जो ऊपर दिखाया गया है।


फ्लेक्सबॉक्स उदाहरण

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

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

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


अंतिम पंक्ति पर आइटम रखने के लिए विभिन्न विकल्प

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

यहाँ एक उदाहरण है जो इस तरह के लेआउट को प्रदर्शित करता है, जिसका उपयोग करते समय प्रति पंक्ति एक या दो तत्व, तीन तत्वों की गणना करके, इस पूरी रेखा पर कब्जा कर लेते हैं।


आइटम सभी उपलब्ध पंक्ति स्थान रखता है।

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

क्या आप Flexbox को ग्रिड से बदलने का प्रयास कर रहे हैं?

जब मैं विभिन्न घटनाओं में बोलता हूं, तो लोग अक्सर मुझसे पूछते हैं कि मैं ग्रिड के बजाय फ्लेक्सबॉक्स का उपयोग कब करूंगा, और क्या हमें वास्तव में फ्लेक्सबॉक्स जैसी तकनीक की आवश्यकता है। जैसा कि हमने पिछले उदाहरण में देखा, ग्रिड फ्लेक्सबॉक्स का प्रतिस्थापन नहीं है। दोनों प्रौद्योगिकियां काफी शांतिपूर्वक सह-अस्तित्व में हैं, और उन स्थितियों का ज्ञान जिसमें उनमें से प्रत्येक खुद को सबसे अच्छा दिखाता है, लेआउट डिजाइन करने की संभावनाओं का विस्तार करता है।


घटक उदाहरण

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


फ्लेक्सबॉक्स निर्मित मेनू

यहां एक ही आयाम में तत्वों की व्यवस्था को नियंत्रित करना आवश्यक है, और यह आवश्यक है कि तत्व लचीले ढंग से व्यवहार करें। फ्लेक्सबॉक्स तकनीक अपना काम पूरी तरह से करती है। फ्लेक्सबॉक्स के उपयोग के लिए धन्यवाद, आप निर्दिष्ट कर सकते हैं कि इन तत्वों को नई लाइनों पर लपेटा जाना चाहिए या नहीं, जो आपको उन्हें सटीक रूप से प्रदर्शित करने की अनुमति देता है यदि पृष्ठ पर उपलब्ध स्थान आपको एक पंक्ति में सभी तत्वों को प्रदर्शित करने की अनुमति नहीं देता है।

उन ब्राउज़रों में लेआउट कैसे दिखना चाहिए जो ग्रिड तकनीक का समर्थन नहीं करते हैं?

यदि हम ग्रिड तकनीक का उपयोग करते हैं, तो संभावित समस्याओं में से एक है जिसे हमें ध्यान में रखना चाहिए, इस तकनीक के लिए ब्राउज़र समर्थन है। तुरंत, हमें यह सोचने की आवश्यकता है कि यदि हमारा पृष्ठ उन ब्राउज़रों में से एक में प्रदर्शित होता है जो ग्रिड का समर्थन नहीं करते हैं (उदाहरण के लिए, IE 11 और नीचे में)। इस समस्या को हल करने के लिए मेरा दृष्टिकोण @supports नियमों का उपयोग @supports और विभिन्न ब्राउज़रों के लिए कोड तैयार करना है। अक्सर (लेकिन हमेशा नहीं) मैं, ग्रिड-आधारित लेआउट के प्रतिस्थापन के रूप में, काफी पुराने ब्राउज़रों के लिए फ्लेक्सबॉक्स-आधारित लेआउट का उपयोग करता हूं।

 .grid {   display: flex;   flex-wrap: wrap;   /*  ,     */ } @supports (display: grid) {   .grid {       display: grid;       /*  ,  Grid */   } } 

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

परिणाम

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

प्रिय पाठकों! आप किन परिस्थितियों में ग्रिड तकनीक का उपयोग करते हैं, और जिसमें - फ्लेक्सबॉक्स?