इस पोस्ट में सीएसएस की कुछ ऐसी बेहतरीन लाइनों के बारे में बताया गया है जो बहुत मुश्किल काम करती हैं और आधुनिक लेआउट बनाने में आपकी मदद करती हैं.
आधुनिक सीएसएस लेआउट की मदद से, डेवलपर कुछ ही कीस्ट्रोक का इस्तेमाल करके, स्टाइल से जुड़े असरदार और काम के नियम बना सकते हैं. ऊपर दी गई जानकारी और इस बाद की पोस्ट में, सीएसएस की 10 बेहतरीन लाइनों के बारे में बताया गया है, जो बहुत मुश्किल काम करती हैं.
इन डेमो को आज़माने या इन्हें आज़माने के लिए, ऊपर दिया गया ग्लिच एम्बेड देखें या 1linelayout.glitch.me पर जाएं.
01. सुपर सेंटर्ड: place-items: center
पहले 'सिंगल-लाइन' लेआउट के लिए, आइए पूरी सीएसएस के सबसे बड़े रहस्य को सुलझाएं: चीज़ों को केंद्रित करना. हम आपको बताना चाहते हैं कि place-items: center के साथ यह करना काफ़ी आसान है.
पहले grid को display तरीके के तौर पर तय करें. इसके बाद, उसी एलिमेंट पर place-items: center लिखें. align-items और justify-items, दोनों को एक साथ सेट करने के लिए place-items शॉर्टहैंड है. इसे center पर सेट करने पर, align-items और justify-items, दोनों center पर सेट हो जाते हैं.
.parent {
display: grid;
place-items: center;
}
इससे कॉन्टेंट को पैरंट एलिमेंट के बीच में ही रखा जा सकता है. भले ही, उसका साइज़ कितना भी हो.
02. डीकंस्ट्रक्टेड पैनकेक: flex: <grow> <shrink> <baseWidth>
इसके बाद, हमारे पास डिकंस्ट्रक्ट किया गया पैनकेक है! यह मार्केटिंग साइटों के लिए एक सामान्य लेआउट है. उदाहरण के लिए, इसमें तीन आइटम की एक लाइन हो सकती है. आम तौर पर, इसमें एक इमेज, टाइटल, और फिर टेक्स्ट के साथ कुछ टेक्स्ट होता है, जो प्रॉडक्ट की कुछ सुविधाओं की जानकारी देता है. मोबाइल पर, हम चाहते हैं कि ये चीज़ें सही तरीके से स्टैक हों और जैसे-जैसे हम स्क्रीन का साइज़ बढ़ाएं, वैसे-वैसे हम भी.
इस इफ़ेक्ट के लिए Flexbox का इस्तेमाल करने से, स्क्रीन का साइज़ बदलने पर आपको इन एलिमेंट की प्लेसमेंट को अडजस्ट करने के लिए मीडिया क्वेरी की ज़रूरत नहीं पड़ेगी.
flex का शॉर्टहैंड यह है: flex: <flex-grow> <flex-shrink> <flex-basis>.
इस वजह से, अगर आपको अपने बॉक्स में <flex-basis> साइज़ डालना है, तो छोटे साइज़ के बॉक्स को छोटा करें. हालांकि, अतिरिक्त जगह भरने के लिए इसे स्ट्रेच न करें. ऐसा करने के लिए, यह लिखें: flex: 0 1 <flex-basis>. इस मामले में, आपका <flex-basis> 150px है, इसलिए यह ऐसा दिखेगा:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
अगर आप चाहते हैं कि बॉक्स को खींचा जाए और अगली लाइन में रैप किए जाने के बाद वह जगह भर जाए, तो <flex-grow> को 1 पर सेट करें, ताकि यह कुछ ऐसा दिखे:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
अब, जैसे-जैसे स्क्रीन का साइज़ बढ़ाया या घटाया जाता है, ये फ़्लेक्सिबल आइटम छोटे हो जाते हैं और बड़े हो जाते हैं.
03. साइडबार का कहना है: grid-template-columns: minmax(<min>, <max>) …)
यह डेमो, ग्रिड लेआउट के लिए minmax फ़ंक्शन का इस्तेमाल करता है. हम साइडबार का कम से कम साइज़ 150px पर सेट कर रहे हैं. हालांकि, हम इसे बड़ी स्क्रीन पर इतना कर रहे हैं कि इसे ज़्यादा से ज़्यादा 25% तक बढ़ाया जा सके. साइडबार हमेशा अपने पैरंट के 25% हॉरिज़ॉन्टल स्पेस का इस्तेमाल करेगा. ऐसा तब तक होगा, जब तक 25%, 150px से छोटा नहीं हो जाता.
इसे ग्रिड-टेंप्लेट-कॉलम की वैल्यू के तौर पर, इस वैल्यू के साथ जोड़ें:
minmax(150px, 25%) 1fr. पहले कॉलम (इस मामले में साइडबार) के आइटम को 25% पर 150px का minmax मिलता है. वहीं, दूसरा आइटम (यहां दिया गया main सेक्शन), बाकी बचे हिस्से को 1fr ट्रैक के तौर पर इस्तेमाल करता है.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. पैनकेक स्टैक: grid-template-rows: auto 1fr auto
डीकंस्ट्रक्टेड पैनकेक के उलट, इस उदाहरण में स्क्रीन का साइज़ बदलने पर उसमें बच्चों को रैप नहीं किया गया है. आम तौर पर, इसे स्टिकी फ़ुटर कहा जाता है. इस लेआउट का इस्तेमाल अक्सर मोबाइल ऐप्लिकेशन में वेबसाइटों और ऐप्लिकेशन, और वेबसाइटों (एक पेज के ऐप्लिकेशन में अक्सर इस ग्लोबल लेआउट का इस्तेमाल होता है) में किया जाता है.
कॉम्पोनेंट में display: grid जोड़ने से, एक कॉलम वाला ग्रिड बन जाएगा. हालांकि, मुख्य एरिया सिर्फ़ उतना ही लंबा होगा जितना कि नीचे फ़ुटर वाला कॉन्टेंट होता है.
फ़ुटर को सबसे नीचे रखने के लिए, यह जोड़ें:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
यह हेडर और फ़ुटर का कॉन्टेंट, बच्चों के साइज़ के हिसाब से अपने-आप सेट हो जाता है. साथ ही, बची हुई जगह (1fr) को मुख्य जगह पर लागू कर देता है. वहीं, auto के साइज़ की पंक्ति अपने चाइल्ड कॉन्टेंट के साइज़ के हिसाब से काम करेगी. इसलिए, कॉन्टेंट का साइज़ बढ़ने पर, लाइन में अपने-आप बड़ा बदलाव होगा.
05 क्लासिक होली ग्रेल लेआउट: grid-template: auto 1fr auto / auto 1fr auto
इस क्लासिक होली ग्रेल लेआउट के लिए, हेडर, फ़ुटर, बायां साइडबार, दाईं ओर का साइडबार, और मुख्य कॉन्टेंट शामिल हैं. यह पिछले लेआउट की तरह ही है. हालांकि, अब यह साइडबार की मदद से दिखता है!
कोड की एक लाइन का इस्तेमाल करके यह पूरा ग्रिड लिखने के लिए, grid-template प्रॉपर्टी का इस्तेमाल करें. इसकी मदद से, लाइन और कॉलम, दोनों को एक साथ सेट किया जा सकता है.
प्रॉपर्टी और वैल्यू का जोड़ा है: grid-template: auto 1fr auto / auto 1fr auto. स्पेस से अलग की गई पहली और दूसरी सूचियों के बीच का स्लैश, पंक्तियों और कॉलम के बीच का ब्रेक होता है.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
जैसा कि पिछले उदाहरण में दिखाया गया है, हेडर और फ़ुटर में अपने-आप साइज़ का कॉन्टेंट होता है. यहां बाईं और दाईं ओर मौजूद साइडबार का साइज़, बच्चों के साइज़ के हिसाब से अपने-आप तय हो जाता है. हालांकि, इस बार यह वर्टिकल (ऊंचाई) के बजाय हॉरिज़ॉन्टल साइज़ (चौड़ाई) है.
06 12-स्पैन ग्रिड: grid-template-columns: repeat(12, 1fr)
इसके बाद, एक और क्लासिक है: 12-स्पैन ग्रिड. repeat() फ़ंक्शन की मदद से, सीएसएस में फटाफट ग्रिड लिखे जा सकते हैं. ग्रिड टेंप्लेट कॉलम के लिए repeat(12, 1fr); का इस्तेमाल करने पर, हर 1fr में से आपको 12 कॉलम मिलते हैं.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
अब आपकी 12 कॉलम वाली एक ग्रिड है, जिससे हम अपने बच्चों को ग्रिड पर रख सकते हैं. ऐसा करने का एक तरीका यह है कि आप उन्हें ग्रिड लाइन का इस्तेमाल करके रखें. उदाहरण के लिए, grid-column: 1 / 13 पहली लाइन से आखिरी लाइन तक (13वें) तक और 12 कॉलम में पूरा होगा. grid-column: 1 / 5; ने पहले चार को स्पैन किया.
span कीवर्ड का इस्तेमाल करके भी ऐसा किया जा सकता है. span की मदद से, शुरुआती लाइन सेट की जाती है. इसके बाद, यह सेट किया जाता है कि उस शुरुआती पॉइंट से कितने कॉलम को स्पैन करना है. इस मामले में, grid-column: 1 / span 12, grid-column: 1 / 13 के बराबर होगा और grid-column: 2 / span 6 का मान grid-column: 2 / 8 के बराबर होगा.
.child-span-12 {
grid-column: 1 / span 12;
}
7 रैम (दोहराएं, अपने-आप, कम से कम): grid-template-columns(auto-fit, minmax(<base>, 1fr))
इस सातवें उदाहरण में, अपने-आप डाले गए और लचीले बच्चों वाला एक रिस्पॉन्सिव लेआउट बनाने के लिए, कुछ ऐसे कॉन्सेप्ट जोड़ें जिनके बारे में आप पहले से ही सीख चुके हैं. बहुत बढ़िया. यहां repeat, auto-(fit|fill), और minmax()' जैसे मुख्य शब्दों को याद रखें. इन्हें छोटे रूप रैम के तौर पर याद रखा जाता है.
कुल मिलाकर ऐसा लगता है:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
आप फिर से दोहराव का उपयोग कर रहे हैं, लेकिन इस बार, किसी स्पष्ट अंकीय मान के बजाय auto-fit कीवर्ड का उपयोग कर रहे हैं. इससे इन चाइल्ड एलिमेंट के अपने-आप प्लेसमेंट होने की सुविधा चालू हो जाती है. इन बच्चों की बेस कम से कम वैल्यू 150px भी है. इसमें ज़्यादा से ज़्यादा वैल्यू 1fr हो सकती हैं. इसका मतलब है कि छोटी स्क्रीन पर, वे पूरी 1fr चौड़ाई तक पहुंचेंगे. जैसे-जैसे वे हर प्रॉडक्ट की चौड़ाई 150px तक पहुंच जाएंगे, वैसे-वैसे वे उसी लाइन पर आने लगेंगे.
auto-fit का इस्तेमाल करने पर, बॉक्स का हॉरिज़ॉन्टल साइज़ 150 पिक्सल से ज़्यादा हो जाएगा और ये बाकी बची जगह को भरने के लिए बढ़ जाएंगे. हालांकि, अगर इसे auto-fill में बदला जाता है, तो कम से कम फ़ंक्शन में बेस साइज़ से ज़्यादा होने पर इनमें बदलाव नहीं होगा:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08 लाइन अप: justify-content: space-between
अगले लेआउट के लिए, यहां मुख्य रूप से justify-content: space-between दिखाया जाना है. इसमें पहले और आखिरी चाइल्ड एलिमेंट को उनके बाउंडिंग बॉक्स के किनारों पर रखा जाता है. साथ ही, बाकी बची जगह को एलिमेंट के बीच बराबर बांटा जाता है. इन कार्ड के लिए, उन्हें Flexbox के डिसप्ले मोड में रखा जाता है, जहां की दिशा flex-direction: column का इस्तेमाल करके कॉलम में सेट की जाती है.
इससे टाइटल, ब्यौरा, और इमेज ब्लॉक को पैरंट कार्ड के अंदर एक वर्टिकल कॉलम में रखा जाता है. इसके बाद, justify-content: space-between को लागू करने से पहले (टाइटल) और आखिरी (इमेज ब्लॉक) एलिमेंट को फ़्लेक्सबॉक्स के किनारों पर ऐंकर कर दिया जाता है. साथ ही, इन एलिमेंट के बीच में जानकारी देने वाले टेक्स्ट को हर एंडपॉइंट पर बराबर स्पेस के साथ रखा जाता है.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09 मेरी शैली को जोड़ना: clamp(<min>, <actual>, <max>)
यहां कम ब्राउज़र सहायता वाली कुछ तकनीकों के बारे में बताया गया है, लेकिन लेआउट और प्रतिक्रियाशील यूज़र इंटरफ़ेस (यूआई) डिज़ाइन के लिए कुछ दिलचस्प चीज़ें मौजूद हैं. इस डेमो में, क्लैंप का इस्तेमाल करके चौड़ाई इस तरह सेट की जा रही है: width: clamp(<min>, <actual>, <max>).
इससे कम से कम और ज़्यादा से ज़्यादा साइज़ के साथ-साथ, असल साइज़ भी सेट हो जाता है. वैल्यू के साथ, यह ऐसा दिख सकता है:
.parent {
width: clamp(23ch, 60%, 46ch);
}
यहां कम से कम साइज़ 23ch या 23 वर्ण की यूनिट है. साथ ही, ज़्यादा से ज़्यादा साइज़ 46ch, 46 वर्णों का है. वर्ण की चौड़ाई वाली इकाइयां, एलिमेंट के फ़ॉन्ट के साइज़ पर आधारित होती हैं (खास तौर पर, 0 ग्लिफ़ की चौड़ाई). 'असल' का साइज़ 50% है, जो इस एलिमेंट की पैरंट विड्थ का 50% दिखाता है.
यहां clamp() फ़ंक्शन जो काम कर रहा है वह इस एलिमेंट को 50% चौड़ाई बनाए रखने में मदद कर रहा है जब तक 50%, 46ch (चौड़े व्यूपोर्ट पर) से ज़्यादा या 23ch (छोटे व्यूपोर्ट पर) से छोटा न हो. जैसे-जैसे मैं माता-पिता के साइज़ को स्ट्रेच और सिकुड़ता हूं, इस कार्ड की चौड़ाई ज़्यादा से ज़्यादा क्लैंप किए गए पॉइंट तक बढ़ जाती है. साथ ही, यह अपने क्लैंप किए गए कम से कम पॉइंट तक घट जाती है. इसके बाद, यह पैरंट ग्रुप के बीच में रहता है, क्योंकि हमने इसे सेंटर में लाने के लिए अतिरिक्त प्रॉपर्टी लागू की हैं. यह ज़्यादा पढ़ने लायक लेआउट की सुविधा चालू करता है, क्योंकि टेक्स्ट बहुत चौड़ा नहीं होगा (46ch से ऊपर) या बहुत ज़्यादा कटा हुआ और छोटा नहीं होगा (23ch से कम).
यह रिस्पॉन्सिव टाइपोग्राफ़ी को लागू करने का भी शानदार तरीका है. उदाहरण के लिए, यह कहा जा सकता है: font-size: clamp(1.5rem, 20vw, 3rem). इस मामले में, किसी हेडलाइन का फ़ॉन्ट साइज़ हमेशा 1.5rem और 3rem के बीच ही रखा जाएगा. हालांकि, यह व्यूपोर्ट की चौड़ाई में फ़िट होने के लिए, 20vw के असल वैल्यू के हिसाब से बढ़ता और छोटा होता जाएगा.
यह एक बेहतरीन तकनीक है. इससे यह पक्का किया जा सकता है कि टेक्स्ट के लिए, कम से कम और ज़्यादा से ज़्यादा साइज़ की वैल्यू का इस्तेमाल किया जा सकता है. हालांकि, ध्यान रखें कि यह सभी मॉडर्न ब्राउज़र पर काम नहीं करती. इसलिए, पक्का करें कि आपके पास फ़ॉलबैक हों और जांच करें.
10. इस आसपेक्ट के लिए सम्मान: aspect-ratio: <width> / <height>
आखिर में, यह आखिरी लेआउट टूल सबसे ज़्यादा प्रयोग वाला है. इसे हाल ही में Chromium 84 में Chrome कैनरी में लाया गया था. साथ ही, इसे लागू करने के लिए Firefox ने काफ़ी कोशिश की है, लेकिन फ़िलहाल यह किसी भी स्टेबल ब्राउज़र वर्शन में मौजूद नहीं है.
हालांकि, मुझे इसके बारे में बताना है, क्योंकि यह अक्सर होने वाली समस्या है. इसका मतलब बस इमेज के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को बनाए रखना है.
aspect-ratio प्रॉपर्टी के साथ, जब कार्ड का साइज़ बदला जाता है, तो हरे रंग का विज़ुअल ब्लॉक 16 x 9 आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) में बना रहता है. हम aspect-ratio: 16 / 9 के साथ आसपेक्ट रेशियो का सम्मान करते हैं.
.video {
aspect-ratio: 16 / 9;
}
इस प्रॉपर्टी के बिना 16 x 9 आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बनाए रखने के लिए, आपको padding-top हैक का इस्तेमाल करना होगा. साथ ही, टॉप-टू-विड्थ रेशियो सेट करने के लिए, इसे 56.25% की पैडिंग देनी होगी. जल्द ही हमारे पास इसके लिए एक प्रॉपर्टी बन जाएगी, ताकि हैकिंग से बचा जा सके और प्रतिशत का हिसाब लगाया जा सके. 1 / 1 रेशियो और 2 / 1 की मदद से 2:1 के अनुपात वाला स्क्वेयर बनाया जा सकता है. साथ ही, इमेज को किसी तय साइज़ के अनुपात में स्केल करने के लिए, हर वह चीज़ बनाई जा सकती है जिसकी आपको ज़रूरत है.
.square {
aspect-ratio: 1 / 1;
}
हालांकि यह सुविधा अब भी उपलब्ध है और आने वाली है, लेकिन इसके बारे में जानना अच्छा है, क्योंकि यह डेवलपर से जुड़ी उन कई समस्याओं को हल करता है जिनका सामना मुझे कई बार करना पड़ा है. खास तौर पर, जब बात वीडियो और iframe की हो.
नतीजा
सीएसएस की 10 असरदार लाइनों को समझने के लिए, आपका धन्यवाद. ज़्यादा जानकारी के लिए, पूरा वीडियो देखें और खुद डेमो आज़माएं.