डेवलपर्स के रूप में हमें जो कुछ करना है, उनमें से एक यह है कि जब कोई नया प्रोजेक्ट दिया जाए तो किसी समस्या से कैसे निपटा जाए। उत्तरदायी वेबसाइटों के साथ काम करते समय, हम अक्सर अपनी वेबसाइट को लेआउट करने के लिए सीएसएस ग्रिड और सीएसएस फ्लेक्सबॉक्स के बीच चयन करते हैं। यह लेख ग्रिड और फ्लेक्सबॉक्स के बीच के अंतरों को समझने का प्रयास करेगा, और जब एक को दूसरे पर चुनना सबसे अच्छा होगा।
फ्लेक्सबॉक्स - एक संक्षिप्त अवलोकन
CSS Flexbox मूल रूप से एक रेस्पॉन्सिव बॉक्स मॉडल है। यह एक कंटेनर के भीतर बेहतर स्थिति की अनुमति देता है और जब तक आप इसकी क्षमताओं से अवगत हैं, तब तक इसे लागू करना काफी आसान है।
लचीला बॉक्स मॉडल अभी भी मार्जिन, पैडिंग, बॉर्डर और सामग्री को नियंत्रित करने के लिए बॉक्स मॉडल के सभी गुणों का उपयोग करता है। जब हम display: flex . सेट करते हैं एक पैरेंट कंटेनर पर, यह उन सभी फ्लेक्स गुणों को खोलता है जिनका उपयोग उस माता-पिता के बच्चों पर किया जाएगा।
फ्लेक्सबॉक्स गुणों का चयन:
- फ्लेक्स-दिशा :कॉलम | पंक्ति * | कॉलम-रिवर्स | पंक्ति-रिवर्स
- फ्लेक्स-रैप :लपेटो | अब्रैप * | रैप-रिवर्स
- फ्लेक्स-फ्लो :सूचीबद्ध पहले दो गुणों के लिए शॉर्टकट - यह प्रारूप का पालन करेगा
flex-flow: <flex-direction> <flex-wrap>; - औचित्य-सामग्री: मुख्य अक्ष के साथ रिक्त स्थान आइटम। जब फ्लेक्स-दिशा को पंक्ति पर सेट किया जाता है, तो मुख्य अक्ष क्षैतिज अक्ष होता है। जब स्तंभ पर सेट किया जाता है, तो मुख्य पहुंच ऊर्ध्वाधर अक्ष होती है।
- औचित्य-सामग्री:फ्लेक्स-स्टार्ट* | फ्लेक्स-एंड | केंद्र | अंतरिक्ष-समान रूप से | अंतरिक्ष के आसपास | स्पेस-बीच
- आइटम संरेखित करें: मुख्य पहुंच के विपरीत अक्ष के साथ रिक्त स्थान आइटम। जब फ्लेक्स-दिशा कॉलम पर सेट होती है, तो वह लंबवत धुरी होगी। जब पंक्ति पर सेट किया जाता है, तो वह क्षैतिज अक्ष होगा।
- अलाइन-आइटम:खिंचाव * |केंद्र |फ्लेक्स-स्टार्ट |फ्लेक्स-एंड |बेसलाइन
- स्वयं को संरेखित करें: इसका उपयोग उन फ्लेक्स वस्तुओं पर करने की अनुमति है जिनके माता-पिता ने अपनी प्रदर्शन संपत्ति को 'फ्लेक्स' घोषित किया है। यह फ्लेक्स कंटेनर में संरेखण को नियंत्रित करता है।
- अलाइन-सेल्फ:ऑटो* | खिंचाव | केंद्र | फ्लेक्स-स्टार्ट | फ्लेक्स-एंड | आधार रेखा
* - संपत्ति की डिफ़ॉल्ट सेटिंग
CSS ग्रिड - एक संक्षिप्त अवलोकन
CSS ग्रिड एक अन्य लेआउट मॉडल है जो उपयोग के लिए उपलब्ध है। यह सीएसएस फ्लेक्सबॉक्स मॉडल की तुलना में थोड़ा नया है, इसलिए ब्राउज़र समर्थन सीएसएस ग्रिड के लिए उतना व्यापक रूप से उपलब्ध नहीं है जितना फ्लेक्सबॉक्स के लिए है। हमारे पास सावधानीपूर्वक रखी गई स्थिति के साथ कॉलम और पंक्तियों में 2डी लेआउट बनाने की क्षमता है। जब हम display: grid . सेट करते हैं हमारे मूल तत्व पर, यह हमें हमारे लिए उपलब्ध सामान्य ग्रिड गुणों का उपयोग करने की अनुमति देता है।
सीएसएस ग्रिड गुणों का चयन
- ग्रिड-गैप, ग्रिड-कॉलम-गैप, ग्रिड-रो-गैप: इसका उपयोग मूल रूप से रिक्ति सेट करने के लिए किया जाता है। ग्रिड गैप कॉलम और रो गैप दोनों को नियंत्रित करने का एक शॉर्टकट है।
- ग्रिड-टेम्पलेट-कॉलम, ग्रिड-टेम्पलेट-पंक्तियाँ: यह आपके ग्रिड में कंटेनरों के मूल स्वरूपण की अनुमति देता है - कॉलम कितने चौड़े होंगे, पंक्तियों पर कितनी ऊँचाई होगी, प्रत्येक पंक्ति में कितने कंटेनर होंगे, आदि।
- औचित्य-सामग्री :संपूर्ण ग्रिड को क्षैतिज रूप से संरेखित करता है।
- सामग्री संरेखित करें :संपूर्ण ग्रिड को लंबवत रूप से संरेखित करता है।
- ग्रिड-स्तंभ, ग्रिड-पंक्ति: हमें यह घोषित करने की अनुमति देता है कि हम अपने ग्रिड आइटम को कितना चौड़ा या कितना ऊंचा चाहते हैं।
मैं किसे चुनूं?
CSS Flexbox के गुण एक ऐसे डिज़ाइन की अनुमति देते हैं जो एक-आयामी लेआउट है:आप या तो अपने लेआउट को पंक्तियों या स्तंभों का उपयोग करके बनाने के लिए सेट कर सकते हैं। यह उन वेब पेजों के लिए बहुत अच्छा है जो सामग्री प्लेसमेंट पर कम और रिस्पॉन्सिव डिज़ाइन में लचीलेपन पर अधिक ध्यान केंद्रित करते हैं।
इसके विपरीत, CSS ग्रिड आपको दो आयामी स्थान में लेआउट बनाने की अनुमति देता है:पंक्तियों और स्तंभों के साथ। ऐसे गुण हैं जो ग्रिड में प्रत्येक कंटेनर के लेआउट और चौड़ाई और ऊंचाई को नियंत्रित करते हैं। तो आप ग्रिड के साथ समाप्त कर सकते हैं जो इस ब्लॉग के शीर्ष पर पोस्ट किए गए सना हुआ ग्लास विंडो के समान दिखते हैं।
यदि आप सामग्री प्लेसमेंट पर ध्यान केंद्रित कर रहे हैं और अंतरिक्ष में अपने चाइल्ड कंटेनर को नियंत्रित करना चाहते हैं, तो ग्रिड आपके लिए लेआउट प्रारूप है। फ्लेक्सबॉक्स प्लेसमेंट के बजाय सामग्री के प्रवाह पर अधिक ध्यान केंद्रित करता है।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
ग्रिड के लिए ब्राउज़र समर्थन उतना व्यापक नहीं है जितना कि फ्लेक्सबॉक्स के लिए है - केवल इसलिए कि मुझे लगता है कि फ्लेक्सबॉक्स ग्रिड से थोड़ा पुराना है। आपके प्रोजेक्ट में किस लेआउट मॉडल का उपयोग करना है, यह चुनते समय यह एक विचार हो सकता है।
निष्कर्ष
आप जो भी लेआउट मॉडल चुनते हैं, वे दोनों समस्या को हल करने के लिए मान्य विकल्प हैं। यह केवल परियोजना का उद्देश्य है जो वास्तव में निर्धारित करता है कि क्या आप सीएसएस फ्लेक्स लेआउट या सीएसएस ग्रिड लेआउट चुनते हैं।