इस पोस्ट में सीएसएस की कुछ अहम बातों के बारे में बताया गया है, जो काफ़ी मेहनत और काम की हैं और शानदार मॉडर्न लेआउट बनाने में आपकी मदद करती हैं.
सीएसएस के मॉडर्न लेआउट की मदद से, डेवलपर बस कुछ कीस्ट्रोक का इस्तेमाल करके, स्टाइलिंग के बारे में काम के और मज़बूत नियम बना सकते हैं. ऊपर दी गई जानकारी और इस बाद की पोस्ट में, सीएसएस की 10 अहम लाइनों के बारे में बताया गया है. ये लाइनें मुश्किल से मुश्किल काम आसान कर देती हैं.
इन डेमो को खुद पढ़ने या इनके साथ खेलने के लिए, ऊपर दिया गया Glitch एम्बेड देखें या 1linelayouts.glitch.me पर जाएं.
1 सुपर सेंटर्ड: place-items: center
पहली 'सिंगल-लाइन' के लिए लेआउट, आइए सारी सीएसएस की सबसे बड़ी गुत्थी सुलझाते हैं: चीज़ों को एक-दूसरे के साथ शेयर करना. मैं आपको बताना चाहती हूं कि place-items: center इस्तेमाल करना आपकी सोच से ज़्यादा आसान है.
पहले grid को display तरीके के तौर पर तय करें. इसके बाद, उसी एलिमेंट पर place-items: center लिखें. place-items, align-items और justify-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 साइज़ वाली लाइन अपने चाइल्ड कॉन्टेंट के लिए तय किए गए कम से कम कॉन्टेंट के साइज़ को ले लेगी. इसलिए, जैसे-जैसे कॉन्टेंट का साइज़ बढ़ता जाएगा, लाइन में बदलाव होते जाएगा और वह अपने-आप बड़ी होती जाएगी.
नवंबर क्लासिक होली ग्रेल लेआउट: 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()' मुख्य शब्द हैं, जिन्हें आपने संक्षिप्त रूप से याद रखा है.
सभी को एक साथ जोड़ने पर यह ऐसा दिखेगा:
.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));
}
नवंबर लाइन अप: 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;
}
नवंबर मेरी शैली में सुधार करना: 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 असरदार लाइनों को समझने के लिए आपका धन्यवाद. ज़्यादा जानने के लिए, पूरा वीडियो देखें और खुद डेमो आज़माएं.