सीएसएस में प्रतिशत के साथ समस्या

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

प्रतिशत का उपयोग करते समय आपके सामने आने वाली सामान्य समस्याओं के बारे में जानें। प्रतिशत के स्थान पर उपयोग की जाने वाली आधुनिक CSS तकनीकों के बारे में भी जानें। ये तकनीकें आपको बिना किसी दोष के प्रतिशत के समान परिणाम देंगी।

एक बहुत ही सरल ग्रिड उदाहरण

प्रतिशत इकाइयों के साथ समस्या प्रदर्शित करने के लिए, इस HTML लेआउट पर विचार करें:

<डिवकक्षा="CONTAINERmy-grid">
 <डिवकक्षा="ग्रिड-आइटम">
डिव>
 <डिवकक्षा="ग्रिड-आइटम">
डिव>
डिव>

बाहरी तत्व एक बुनियादी है डिव दो के साथ कंटेनर तत्व डिव बच्चे। प्रत्येक बच्चे के पास है ग्रिड-आइटम कक्षा। कंटेनर को दो कॉलम (दो बॉक्स) वाले ग्रिड में बदलने के लिए, हमें निम्नलिखित CSS कोड लागू करने की आवश्यकता होगी:

शरीर {
पृष्ठभूमि का रंग: काला;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: फ्लेक्स-स्टार्ट;
}
.my-ग्रिड {
दिखाना: जाल;
ग्रिड-टेम्प्लेट-कॉलम: 50% 50%;
अंतर: 3रेम;
सीमा: 2पिक्सलठोससोना;
गद्दी: 1रेम;
}
.ग्रिड-आइटम {
सीमा: 3पिक्सलठोससोना;
गद्दी: 10रेम 0;
पृष्ठभूमि: नीला;
}

तो प्रत्येक कॉलम (ग्रिड आइटम) में सोने का पृष्ठभूमि रंग होता है। कंटेनर पैरेंट क्लास पर, हम सेट करते हैं ग्रिड-टेम्प्लेट-कॉलम प्रत्येक कॉलम के लिए 50% तक। नतीजतन, दोनों बक्से कंटेनर तत्व की कुल चौड़ाई का 50% हिस्सा लेते हैं।

यहाँ परिणाम है:

लेकिन इस संरेखण में समस्याएं हैं। सबसे पहले, यदि आपने एक जोड़ने का फैसला किया है अंतर ग्रिड माता-पिता के लिए, बच्चा किनारे से बह सकता है। उदाहरण के लिए, यदि आप जोड़ना चाहते थे अंतर: 3 पीएक्स तक .my-ग्रिड CSS में ब्लॉक करें, तो यहां बताया गया है कि लेआउट कैसा दिखेगा:

जैसा कि आप ऊपर की छवि में देख सकते हैं, दायां बॉक्स कंटेनर से बाहर चला गया है। कभी-कभी आप इसे नोटिस नहीं कर सकते क्योंकि आपका अंतर काफी छोटा है, जिसके परिणामस्वरूप अजीब संरेखण समस्या होती है। लेकिन अगर आपके पास बड़ा गैप है, तो ओवरलैप काफी स्पष्ट हो जाता है।

जब भी आप प्रतिशत का उपयोग कर रहे हों और मार्जिन या अंतराल जोड़ रहे हों, तो इस प्रकार की त्रुटियों का सामना करने का एक बड़ा मौका है। लेकिन त्रुटि क्यों होती है?

ऐसा इसलिए है क्योंकि प्रत्येक कॉलम माता-पिता का 50% है। उपरोक्त उदाहरण में, हमारे पास 50% जमा 50% प्लस गैप (3px) है, जो बॉक्स को कंटेनर से बाहर धकेलता है।

ध्यान दें कि यह त्रुटि केवल 50-50 के साथ ही नहीं होती है। आप पहले कॉलम को 75%, दूसरे कॉलम को 25% पर सेट कर सकते हैं और त्रुटि तब भी होगी। यही कारण है कि आपको निम्नलिखित समाधान का अधिक बार उपयोग करने की आवश्यकता है।

आंशिक मूल्यों के साथ समाधान

समाधान प्रतिशत के बजाय भिन्नात्मक मानों का उपयोग करना है। इसलिए पहले कॉलम को 75% और दूसरे को 50% पर सेट करने के बजाय, आप पहले कॉलम को 3fr और दूसरे कॉलम को 1fr पर सेट कर सकते हैं:

ग्रिड-टेम्प्लेट-कॉलम: 3फादर 1फादर

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

प्रतिशत से अधिक fr का उपयोग करने का एक अन्य लाभ—या अन्य निरपेक्ष इकाइयाँ, जैसे px या em—यह है कि आप उन्हें निश्चित मूल्यों के साथ जोड़ सकते हैं। यहाँ एक उदाहरण है:

ग्रिड-टेम्प्लेट-कॉलम: 1fr 10rem;

उपरोक्त कोड के साथ, आपको एक निश्चित मान मिलेगा जो स्क्रीन आकार की परवाह किए बिना कभी नहीं बदलता है। ऐसा इसलिए है क्योंकि दाईं ओर का स्तंभ हमेशा 10रेम पर रहेगा जबकि बाईं ओर का स्तंभ शेष स्थान (शून्य से अंतराल) पर कब्जा कर लेगा।

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

एक और यथार्थवादी उदाहरण

आइए कल्पना करें कि आपके पास एक पृष्ठ है जिसमें मुख्य सामग्री क्षेत्र और एक अलग (संबंधित पोस्ट के लिए) शामिल है। मुख्य सामग्री क्षेत्र स्क्रीन के तीन अंशों को लेता है जबकि एक ओर का भाग शेष स्थान को घटाकर अंतराल लेता है:

कंटेनर {
चौड़ाई: 100%;
दिखाना: जाल;
ग्रिड-टेम्प्लेट-कॉलम: 3फादर 1फादर;
अंतर: 1.5रेम;
}
कार्ड {
पृष्ठभूमि का रंग: #5ए5ए5ए;
गद्दी: 10पिक्सल;
मार्जिन नीचे: .5रेम;
}

यहाँ परिणाम है:

आमतौर पर, जब स्क्रीन बहुत संकरी हो जाती है, तो आप साइडबार (या एक तरफ) को पृष्ठ के नीचे (या ऊपर) ले जाते हैं। इसका मतलब यह है कि जब व्यूपोर्ट एक निश्चित ब्रेकप्वाइंट से टकराता है तो मीडिया क्वेश्चन सेट करना जो सब कुछ एक दूसरे के ऊपर रखता है।

यहां बताया गया है कि जब व्यूपोर्ट 55em या उससे कम हिट करता है तो आप सब कुछ एक कॉलम में कैसे स्टैक कर सकते हैं:

@मीडिया(अधिकतम चौड़ाई: 55em) {
कंटेनर {
दिखाना: मोड़ना;
फ्लेक्स-दिशा: कॉलम;
 }
}

और नतीजा कुछ इस तरह दिखेगा:

अब आप नहीं चाहते कि प्रत्येक कार्ड पूरे व्यूपोर्ट की चौड़ाई में फैला हो। बल्कि कार्डों को अगल-बगल प्रदर्शित करना चाहिए। इसे हासिल करने का सबसे अच्छा तरीका सीएसएस ग्रिड है। लेकिन ग्रिड-टेम्प्लेट-कॉलम के लिए निश्चित चौड़ाई मान (जैसे 50%) सेट करने के बजाय, उपयोग करें दोहराना() निम्नानुसार कार्य करें:

.साइडबार-ग्रिड {
दिखाना: जाल;
ग्रिड-टेम्प्लेट-कॉलम: दोहराना(स्वत: फ़िट, न्यूनतम अधिकतम(25रेम, 1फादर));
संरेखित सामग्री: शुरू;
अंतर: 2रेम;
}

यह सीएसएस न्यूनतम आकार 25rem और अधिकतम आकार 1fr सेट करता है। यह दृष्टिकोण निश्चित चौड़ाई निर्धारित करने से काफी बेहतर है क्योंकि यह आंतरिक आकार पर निर्भर करता है। दूसरे शब्दों में, यह उपलब्ध मापदंडों के आधार पर ब्राउज़र को चीजों का पता लगाने देता है।

अब जब आप ब्राउज़र विंडो को एक विशिष्ट चौड़ाई तक कम करते हैं, तो ग्रिड बॉक्स स्वचालित रूप से प्रति पंक्ति दो बॉक्स में समायोजित हो जाता है।

जब स्क्रीन छोटी हो जाती है, तो यह प्रति पंक्ति एक बॉक्स तक गिर जाती है। तो ब्राउज़र सब कुछ एक दूसरे के ऊपर रखता है। यह सब तब होता है जब आप विंडो का आकार बदलते हैं। आप एक ब्राउज़र सुविधा का उपयोग कर सकते हैं जैसे यह CSS कैसे काम करती है यह समझने के लिए Chrome DevTools, और विंडोज़ का आकार बदलने से लेआउट कैसे बदलता है।

सबसे अच्छा हिस्सा यह है कि तत्व को उत्तरदायी बनाने के लिए आपको कंटेनर क्वेरी या किसी भी फैंसी की आवश्यकता नहीं है। बस एक ग्रिड सेट करें और उपयोग करें न्यूनतम अधिकतम() निश्चित आकार के बजाय भिन्नात्मक मान सेट करने के लिए।

सीएसएस ग्रिड के बारे में ज़्यादा जानें

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

सीएसएस ग्रिड का उपयोग करते समय एक बात का ध्यान रखना चाहिए कि जवाबदेही पर ध्यान दिया जाए। तत्वों के बीच टकराव के मामलों से बचने के लिए आप भिन्नात्मक दृष्टिकोण का भी उपयोग कर सकते हैं। CSS ग्रिड में महारत हासिल करना याद रखें क्योंकि वेबसाइट बनाते समय लेआउट शैली आपकी बहुत मदद करेगी।