𝗖𝗦𝗦 𝗚𝗿𝗶𝗱 𝘃𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅
अपने CSS लेआउट्स से लड़ना बंद करें।
मैं Flexbox के साथ खराब लेआउट्स को ठीक करने में घंटों बिता देता था। मैं आइटम्स को एक पंक्ति (row) में लपेटने (wrap) की कोशिश करता था, लेकिन आखिरी आइटम पूरी स्क्रीन पर फैल जाता था। यह गलत दिखता था। मैंने मार्जिन और अन्य हैक्स आज़माए, लेकिन कुछ भी काम नहीं आया।
फिर मैंने अपनी सोच बदलकर CSS Grid को अपना लिया।
अंतर सरल है:
- Flexbox एक-आयामी (one-dimensional) लेआउट के लिए है। इसका उपयोग एक सिंगल रो (row) या सिंगल कॉलम (column) के लिए करें।
- CSS Grid दो-आयामी (two-dimensional) लेआउट के लिए है। इसका उपयोग तब करें जब आपको एक ही समय में रो (rows) और कॉलम (columns) दोनों को नियंत्रित करने की आवश्यकता हो।
Flexbox को छोटे कार्यों के लिए एक टूल के रूप में समझें। Grid को अपने पूरे पेज स्ट्रक्चर के लिए एक टूल के रूप में समझें।
The Flexbox Trap: जब आप गैलरी के लिए Flexbox का उपयोग करते हैं, तो आइटम्स हर स्क्रीन साइज पर पूरी तरह से अलाइन नहीं हो पाते हैं। अक्सर आपके पास "orphan" आइटम्स बच जाते हैं जो आपके डिज़ाइन के तालमेल को बिगाड़ देते हैं।
The Grid Solution: Grid के साथ, आप कोड की एक ही लाइन में रिस्पॉन्सिव गैलरी बना सकते हैं।
इसका उपयोग करें:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
यह ब्राउज़र को बताता है कि जितने संभव हो उतने 250px के कॉलम फिट करें। ब्राउज़र आपके लिए गणित खुद कर लेता है। अब कोई अंदाज़ा लगाने की ज़रूरत नहीं। अब कोई टूटी हुई रो (rows) नहीं होंगी।
The Dashboard Example: साइडबार, मुख्य कंटेंट और फुटर के साथ डैशबोर्ड बनाना Flexbox के साथ कठिन है। फुटर को पूरी चौड़ाई में फैलाने के लिए आपको अक्सर नेस्टेड कंटेनर्स और उलझे हुए कोड की आवश्यकता होती है।
Grid के साथ, आप tracks को एक बार परिभाषित करते हैं:
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
आप एक ही कमांड का उपयोग करके फुटर को पहले कॉलम से लेकर आखिरी कॉलम तक फैलाने के लिए कह सकते हैं। आपका कोड साफ और पढ़ने में आसान हो जाता है।
My advice:
• हेडर या बटन में सरल अलाइनमेंट के लिए Flexbox का उपयोग करें।
• मुख्य पेज लेआउट और जटिल गैलरी के लिए Grid का उपयोग करें।
• केवल लेआउट की समस्या को ठीक करने के लिए कंटेनर्स को नेस्ट करना बंद करें।
• स्पेस को आसानी से वितरित करने के लिए fr यूनिट का उपयोग करें।
इसे आज ही आज़माएँ। अपने द्वारा Flexbox से बनाए गए किसी पुराने कंपोनेंट को लें। उसे CSS Grid का उपयोग करके फिर से लिखें। आप देखेंगे कि आपका कोड छोटा हो गया है और आपके लेआउट और भी मजबूत हो गए हैं।