इस पोस्ट में, सीएसएस की कुछ ऐसी लाइनें हाइलाइट की गई हैं जो मुश्किल काम को आसान बनाती हैं. साथ ही, आपको मज़बूत और आधुनिक लेआउट बनाने में मदद करती हैं.
आधुनिक सीएसएस लेआउट की मदद से, डेवलपर कुछ ही कीस्ट्रोक में स्टाइल के सटीक और बेहतर नियम लिख सकते हैं. ऊपर दी गई बातचीत और इस पोस्ट में, सीएसएस की 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;
}
पिछले उदाहरण की तरह, यहां भी हेडर और फ़ुटर में कॉन्टेंट का साइज़ अपने-आप सेट हो गया है. साथ ही, बाईं और दाईं ओर मौजूद साइडबार का साइज़, उनके चाइल्ड एलिमेंट के साइज़ के हिसाब से अपने-आप सेट हो गया है. हालांकि, इस बार यह वर्टिकल (ऊंचाई) के बजाय हॉरिज़ॉन्टल साइज़ (चौड़ाई) है.
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));
}
आपने फिर से repeat का इस्तेमाल किया है, लेकिन इस बार साफ़ तौर पर दी गई संख्या वाली वैल्यू के बजाय, 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;
}
09. 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 Canary के लिए लॉन्च किया गया था. 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 शानदार लाइनों के बारे में जानने के लिए धन्यवाद. ज़्यादा जानने के लिए, पूरा वीडियो देखें और खुद डेमो आज़माएं.