इस पोस्ट में सीएसएस की कुछ अहम खूबियों के बारे में बताया गया है. ये कुछ फ़ायदे हैं जो काफ़ी मेहनत करके, आधुनिक तरीके से लेआउट बनाने में आपकी मदद करते हैं.
सीएसएस के मॉडर्न लेआउट की मदद से, डेवलपर बस कुछ कीस्ट्रोक का इस्तेमाल करके, स्टाइलिंग के बारे में काम के और मज़बूत नियम बना सकते हैं. ऊपर दी गई बातचीत और इस पोस्ट में, सीएसएस की 10 ऐसी लाइनें देखी गई हैं जो काफ़ी काम की हैं.
इन डेमो को खुद आज़माने या इनके बारे में जानने के लिए, ऊपर दिए गए Glitch एम्बेड को देखें या 1linelayouts.glitch.me पर जाएं.
1 सुपर सेंटर: place-items: center
पहले 'सिंगल-लाइन' लेआउट के लिए, सीएसएस की दुनिया की सबसे बड़ी पहेली को हल करते हैं: चीज़ों को बीच में रखना. हम आपको बताना चाहते हैं कि place-items: center की मदद से, यह काम आपकी सोच से ज़्यादा आसान है.
सबसे पहले, display के तौर पर grid तय करें. इसके बाद, उसी एलिमेंट पर place-items: center लिखें. place-items, align-items और justify-items, दोनों को एक साथ सेट करने के लिए शॉर्टहैंड है. इसे center पर सेट करने से, align-items और justify-items, दोनों center पर सेट हो जाते हैं.
.parent {
display: grid;
place-items: center;
}
इससे, कॉन्टेंट को पैरंट में पूरी तरह से बीच में रखा जा सकता है. इस बात से कोई फ़र्क़ नहीं पड़ता कि कॉन्टेंट का साइज़ कितना है.
02. The Deconstructed Pancake: 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 से छोटा न हो जाए.
इसे grid-template-columns की वैल्यू के तौर पर जोड़ें. इसके लिए, यह वैल्यू डालें:
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;
}
पिछले उदाहरण की तरह, इसमें हेडर और फ़ुटर का कॉन्टेंट अपने-आप साइज़ का था. यहां बाईं और दाईं ओर मौजूद साइडबार का साइज़, बच्चों की प्रोफ़ाइल के हिसाब से अपने-आप बना दिया गया है. हालांकि, इस बार यह वर्टिकल (height) के बजाय हॉरिज़ॉन्टल साइज़ (चौड़ाई) है.
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;
}
07. रैम (दोहराएं, ऑटो, कम से कम और ज़्यादा से ज़्यादा): grid-template-columns(auto-fit, minmax(<base>, 1fr))
इस सातवें उदाहरण के लिए, अपने-आप प्लेस होने वाले और लचीले बच्चों के साथ रिस्पॉन्सिव लेआउट बनाने के लिए, कुछ ऐसे कॉन्सेप्ट को मिलाएं जिनके बारे में आप पहले ही सीख चुके हैं. काफ़ी अच्छा. यहां याद रखने के लिए मुख्य शब्द repeat, auto-(fit|fill), और minmax()' हैं. इन्हें याद रखने के लिए, RAM का इस्तेमाल करें.
सभी को एक साथ जोड़ने पर यह ऐसा दिखेगा:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
आप फिर से दोहराए जाने का उपयोग कर रहे हैं, लेकिन इस बार किसी स्पष्ट संख्यात्मक मान के बजाय auto-fit कीवर्ड का उपयोग कर रहे हैं. इससे, इन चाइल्ड एलिमेंट को अपने-आप प्लेस किया जा सकता है. इन चाइल्ड खातों की बेस कम से कम वैल्यू 150px भी होती है और ज़्यादा से ज़्यादा वैल्यू 1fr होती है. इसका मतलब है कि छोटी स्क्रीन का मतलब है कि ये पूरी चौड़ाई वाले 1fr साइज़ का इस्तेमाल करेंगे. साथ ही, जैसे-जैसे इनकी चौड़ाई 150px तक पहुंच जाएगी, ये उसी लाइन में फ़्लो करना शुरू कर देंगे.
auto-fit का इस्तेमाल करने पर, बॉक्स स्ट्रेच हो जाएंगे, क्योंकि उनका हॉरिज़ॉन्टल साइज़ 150 पिक्सल से ज़्यादा हो जाएगा. इससे, बाकी बचे पूरे स्पेस को भरने में मदद मिलेगी. हालांकि, अगर इसे auto-fill में बदला जाता है, तो minmax फ़ंक्शन में उनके बेस साइज़ से ज़्यादा होने पर, वे स्ट्रेच नहीं होंगे:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. लाइन अप: justify-content: space-between
अगले लेआउट के लिए, यहां justify-content: space-between को दिखाना मुख्य बात है. यह पहले और आखिरी चाइल्ड एलिमेंट को उनके बाउंडिंग बॉक्स के किनारों पर रखता है. साथ ही, बाकी स्पेस को एलिमेंट के बीच बराबर-बराबर बांटता है. इन कार्ड को फ़्लेक्सबॉक्स डिसप्ले मोड में रखा गया है. साथ ही, flex-direction: column का इस्तेमाल करके, इनका डायरेक्शन कॉलम पर सेट किया गया है.
इससे, शीर्षक, ब्यौरा, और इमेज ब्लॉक, पैरंट कार्ड में वर्टिकल कॉलम में दिखते हैं. इसके बाद, justify-content: space-between का इस्तेमाल करने पर, पहले (टाइटल) और आखिरी (इमेज ब्लॉक) एलिमेंट, फ़्लेक्सबॉक्स के किनारों पर एंकर हो जाते हैं. साथ ही, इनके बीच मौजूद जानकारी देने वाला टेक्स्ट, हर एंडपॉइंट के बीच बराबर स्पेसिंग के साथ दिखता है.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
नवंबर Clamping My Style: 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;
}
यह सुविधा अभी पूरी तरह से उपलब्ध नहीं है, लेकिन इस बारे में जानना अच्छा है. इससे डेवलपर को कई समस्याओं से निजात मिलती है. मुझे भी कई बार इन समस्याओं का सामना करना पड़ा है. खास तौर पर, वीडियो और iframes से जुड़ी समस्याओं का.
नतीजा
सीएसएस की 10 शानदार लाइनों के बारे में जानने के लिए धन्यवाद. ज़्यादा जानने के लिए, पूरा वीडियो देखें और खुद डेमो आज़माएं.