यदि आप आश्चर्यजनक, उत्तरदायी वेबसाइटों का निर्माण करना चाहते हैं तो फ्लेक्सबॉक्स और सीएसएस ग्रिड की ठोस समझ आवश्यक है।
यदि आप लंबे समय से सीएसएस लिख रहे हैं, तो संभावना है कि आपने कम से कम इन शर्तों के बारे में सुना होगा। आपने कुछ हद तक एक या दोनों का भी इस्तेमाल किया होगा। वे दोनों CSS के शक्तिशाली भाग हैं, समान लेकिन सूक्ष्म रूप से भिन्न उपयोग मामलों के साथ।
फ्लेक्सबॉक्स क्या है?
फ्लेक्सबॉक्स एक आयामी सीएसएस लेआउट विधि है जो कुछ समय के लिए आसपास रही है। आप फ्लेक्सबॉक्स को संबंधित सीएसएस गुणों के एक समूह के रूप में सोच सकते हैं जिसका उपयोग आप HTML तत्वों को एक कंटेनर में संरेखित करने और उनके बीच की जगह को प्रबंधित करने के लिए कर सकते हैं।
फ्लेक्सबॉक्स से पहले, इस प्रकार के लेआउट के लिए फ्लोट के निराशाजनक और अनावश्यक उपयोग की आवश्यकता होती थी और स्थिति गुण.
यदि आप फ्लेक्सबॉक्स के ब्राउज़र समर्थन के बारे में चिंतित हैं, तो चिंता न करें। के अनुसार caniuse.com, सभी आधुनिक ब्राउज़र फ्लेक्सबॉक्स का समर्थन करते हैं।
फ्लेक्सबॉक्स की मूल बातें
जबकि फ्लेक्सबॉक्स में कई सीएसएस गुण शामिल हैं, मूल बातें बहुत सरल हैं। फ्लेक्सबॉक्स का उपयोग हमेशा पैरेंट कंटेनर को फ्लेक्स-कंटेनर के रूप में जोड़कर शुरू किया जाता है
डिस्प्ले: फ्लेक्स इसकी शैली के नियमों के लिए। ऐसा करने से इस तत्व के सभी बच्चे स्वचालित रूप से फ्लेक्स-आइटम बन जाते हैं।उसके बाद, आप फ्लेक्स-कंटेनर के उपयोग से अंतरिक्ष के वितरण को नियंत्रित कर सकते हैं औचित्य-सामग्री संपत्ति. आप के साथ फ्लेक्स-आइटम के संरेखण को नियंत्रित कर सकते हैं संरेखित-आइटम संपत्ति।
यहां एक कोड उदाहरण दिया गया है जो फ्लेक्सबॉक्स का उपयोग अपने बच्चों के बीच समान रूप से कंटेनर में जगह फैलाने के लिए करता है, और उन सभी को कंटेनर के केंद्र में संरेखित करता है। यह एचटीएमएल है:
<डिव क्लास ="CONTAINER">
<डिव>1</div>
<डिव>2</div>
<डिव>3</div>
<डिव>4</div>
<डिव>5</div>
</div>यह सीएसएस है:
कंटेनर {
डिस्प्ले: फ्लेक्स;
चौड़ाई: 100%;
जस्टिफाई-कंटेंट: स्पेस-अराउंड;
संरेखित-आइटम: केंद्र;
बॉर्डर: 1px सॉलिड ब्लैक;
ऊंचाई: 200 पीएक्स;
}
कंटेनर > डिव {
ऊंचाई: 100 पीएक्स;
चौड़ाई: 100 पीएक्स;
पृष्ठभूमि-रंग: लाल;
रंग सफेद;
फ़ॉन्ट-आकार: 5रेम;
पाठ-संरेखण: केंद्र;
सीमा-त्रिज्या: 5px;
}
और यहाँ आउटपुट है:
सीएसएस ग्रिड क्या है?
CSS ग्रिड एक लेआउट सिस्टम है जो Flexbox का पूरक है। फ्लेक्सबॉक्स शक्तिशाली है, लेकिन कुछ प्रकार के लेआउट के लिए बहुत उपयुक्त नहीं है। फ्लेक्सबॉक्स के साथ एक पूरे पृष्ठ की संरचना को बाहर करने की कोशिश करना बदसूरत, गैर-शब्दार्थ मार्कअप और हैकी सीएसएस को शामिल करने वाला एक निराशाजनक कार्य होगा।
सीएसएस ग्रिड फ्लेक्सबॉक्स प्रतिस्थापन नहीं है, बल्कि कुछ स्थितियों के लिए एक वैकल्पिक प्रणाली है।
सीएसएस ग्रिड के लिए समर्थन उतना व्यापक नहीं है जितना फ्लेक्सबॉक्स के लिए है, लेकिन ग्रिड है यथोचित रूप से समर्थित 2022 में।
सीएसएस ग्रिड की मूल बातें
ग्रिड की अवधारणा सरल है। जैसा कि नाम से पता चलता है, सीएसएस ग्रिड आपको किसी भी संख्या में पंक्तियों/स्तंभों के साथ एक मूल कंटेनर में स्थान को एक पंक्ति और स्तंभ ग्रिड में विभाजित करने की अनुमति देता है। उसके बाद, आप पैरेंट के ग्रिड की पंक्तियों को संदर्भित करके चाइल्ड आइटम की स्थिति निर्दिष्ट करते हैं।
जोड़कर प्रारंभ करें प्रदर्शन: ग्रिड मूल कंटेनर के लिए। फिर प्रयोग करें ग्रिड-टेम्प्लेट-पंक्तियाँ और ग्रिड-टेम्प्लेट-कॉलम उन पंक्तियों और स्तंभों को निर्दिष्ट करने के लिए विशेषताएँ जिनमें आप ग्रिड को विभाजित करना चाहते हैं। तब आप उपयोग कर सकते हैं ग्रिड-स्तंभ और ग्रिड-पंक्ति गुण बाल तत्वों पर उन्हें यह बताने के लिए कि उन्हें ग्रिड में कहाँ होना चाहिए। आइए एक ग्रिड उदाहरण देखें जो पहले से पांच-तत्व सेटअप का उपयोग करता है, लेकिन अधिक जटिल व्यवस्था में।
यहाँ एचटीएमएल है:
<डिव क्लास ="CONTAINER">
<डिव>1</div>
<डिव क्लास ="दो">2</div>
<डिव क्लास ="तीन">3</div>
<डिव क्लास ="चार">4</div>
<डिव क्लास ="पाँच">5</div>
</div>यहाँ सीएसएस है:
कंटेनर {
प्रदर्शन: ग्रिड;
चौड़ाई: 100%;
ग्रिड-टेम्प्लेट-पंक्तियां: दोहराना (3, 1fr);
ग्रिड-टेम्प्लेट-कॉलम: रिपीट (3, 1fr);
अंतर: 0.5रेम;
बॉर्डर: 1px सॉलिड ब्लैक;
ऊंचाई: 300 पीएक्स;
}कंटेनर > डिव {
पृष्ठभूमि-रंग: लाल;
रंग सफेद;
फ़ॉन्ट-आकार: 5रेम;
पाठ-संरेखण: केंद्र;
सीमा-त्रिज्या: 5px;
}
कंटेनर &जीटी; ।दो {
ग्रिड-पंक्ति: 2;
ग्रिड-स्तंभ: 2;
}
यहाँ आउटपुट है:
सीएसएस ग्रिड में भी बहुत कुछ शामिल है अन्य गुण जिनका उपयोग आप अधिक जटिल लेआउट बनाने के लिए कर सकते हैं.
आपको कौन सा इस्तेमाल करना चाहिए?
सबसे पहले, यह ध्यान रखना महत्वपूर्ण है कि फ्लेक्सबॉक्स और ग्रिड का एक साथ उपयोग करने से आपको कोई नहीं रोकता है और कुछ मामलों में, यह सबसे अच्छा विकल्प है। उस ने कहा, आइए इस सवाल का जवाब दें कि इनमें से प्रत्येक सिस्टम किस लेआउट को लागू करने के लिए सबसे उपयुक्त है।
फ्लेक्सबॉक्स उन लेआउट के निर्माण के लिए सबसे उपयुक्त है जिनमें एक पंक्ति में तत्वों को संरेखित करना और वितरित करना शामिल है। इस तरह के लेआउट के उदाहरण एक खंड के अंत में आइकन संरेखित कर रहे हैं, या एक नेविगेशन बार में लिंक व्यवस्थित कर रहे हैं।
दूसरी ओर, ग्रिड तब सबसे ज्यादा चमकता है, जब आपको तत्वों को दूसरों के सापेक्ष सटीक स्थिति में रखना होता है (क्षैतिज और लंबवत दोनों), और आपको विभिन्न स्क्रीन आकारों को आसानी से अनुकूलित करने के लिए इस स्थिति की आवश्यकता है।
प्रदर्शित करने के लिए, यहाँ कोड है जिसे आपको फ्लेक्सबॉक्स के साथ ग्रिड उदाहरण से लेआउट को फिर से बनाने के लिए लिखना होगा।
एचटीएमएल:
<डिव क्लास ="CONTAINER">
<डिव क्लास ="उप एक">
<डिव>1</div>
<डिव>5</div>
</div><डिव क्लास ="उप दो">
<डिव>2</div>
</div>
<डिव क्लास ="उप तीन">
<डिव>4</div>
<डिव>3</div>
</div>
</div>
सीएसएस:
कंटेनर {
बॉर्डर: 1px सॉलिड ब्लैक;
ऊंचाई: 300 पीएक्स;
}।विषय {
डिस्प्ले: फ्लेक्स;
चौड़ाई: 100%;
}।एक, ।तीन {
जस्टिफाई-कंटेंट: स्पेस-बीच
}।दो {
औचित्य-सामग्री: केंद्र;
}
।विषय > डिव {
ऊंचाई: 100 पीएक्स;
चौड़ाई: 100 पीएक्स;
पृष्ठभूमि-रंग: लाल;
रंग सफेद;
फ़ॉन्ट-आकार: 5रेम;
पाठ-संरेखण: केंद्र;
सीमा-त्रिज्या: 5px;
}
और यहाँ आउटपुट है:
यहां ध्यान देने वाली मुख्य बात यह है कि हालांकि यह कोड ग्रिड उदाहरण के समान आउटपुट उत्पन्न करता है, यहां मार्कअप काफी अधिक जटिल है। इस लेआउट को कार्यान्वित करने के लिए उप-कंटेनरों की आवश्यकता होती है, और आपको क्रमांकित divs को मार्कअप में क्रम से बाहर रखना होगा।
इसके अलावा, मान लीजिए कि आपको इस लेआउट को एक अजीब स्थिति में स्थानांतरित करने की आवश्यकता है: दूसरे के साथ 5 वें div को संरेखित करें। यदि आपने इसके लिए Flexbox का उपयोग किया है, तो आपको इसका सहारा लेना होगा स्थिति: सापेक्ष या ऐसा ही कुछ। ग्रिड का उपयोग करते हुए, आपको बस इसे स्थानांतरित करना है ग्रिड-स्तंभ संपत्ति।
लेकिन, इसके विपरीत, फ्लेक्सबॉक्स उदाहरण से ग्रिड के साथ सरल सिंगल लाइन संरेखण को लागू करने के परिणामस्वरूप बहुत अधिक सीएसएस होगा। ग्रिड उस तरह के लेआउट के लिए स्पष्ट रूप से कम अनुकूल है।
जबकि फ्लेक्सबॉक्स और ग्रिड ज्यादातर एक दूसरे के प्रभाव को दोहरा सकते हैं, कुछ अपवाद हैं। फ्लेक्सबॉक्स के साथ तत्वों को ओवरलैप करना काफी कठिन है लेकिन ग्रिड के साथ बहुत आसान है। ग्रिड तत्वों को मार्जिन: ऑटो के साथ अन्य तत्वों से खुद को दूर करने की अनुमति नहीं देता है, जिस तरह फ्लेक्सबॉक्स करता है।
फ्लेक्सबॉक्स और ग्रिड शक्तिशाली लेआउट सिस्टम हैं
फ्लेक्सबॉक्स और सीएसएस ग्रिड दोनों डिज़ाइन सिस्टम हैं जो आपकी वेबपेज सामग्री को आसान बनाते हैं। ग्रिड द्वि-आयामी लेआउट के लिए सबसे अच्छा है जिसमें कई तत्व हैं जिन्हें एक-दूसरे के सापेक्ष सटीक रूप से स्थित करने की आवश्यकता होती है। फ्लेक्सबॉक्स एक-आयामी या एकल-पंक्ति लेआउट के लिए बेहतर है, जहां आपको तत्वों के समूह को एक निश्चित तरीके से स्थान देने की आवश्यकता होती है।