इस पोस्ट में, सीएसएस की कुछ ऐसी लाइनों के बारे में बताया गया है जो मुश्किल काम को आसान बना देती हैं. साथ ही, इनकी मदद से मॉडर्न लेआउट बनाए जा सकते हैं.
पब्लिश करने की तारीख: 7 जुलाई, 2020, पिछली बार अपडेट करने की तारीख: 15 दिसंबर, 2025
मॉडर्न सीएसएस लेआउट की मदद से डेवलपर, कुछ ही कीस्ट्रोक में स्टाइलिंग के बहुत काम के और मज़बूत नियम लिख सकते हैं. ऊपर दी गई बातचीत और इस पोस्ट में, सीएसएस की 10 ऐसी लाइनों के बारे में बताया गया है जो बहुत काम की हैं.
इन डेमो को खुद आज़माने के लिए, ऊपर दिए गए साइट एम्बेड को देखें या 1linelayouts.com पर जाएं.
01. सुपर सेंटर: 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>
इसके बाद, हमारे पास डीकंस्ट्रक्टेड पैनकेक है! यह मार्केटिंग साइटों के लिए एक सामान्य लेआउट है. उदाहरण के लिए, इसमें तीन आइटम की एक लाइन हो सकती है. आम तौर पर, इसमें एक इमेज, टाइटल, और फिर कुछ टेक्स्ट होता है, जिसमें किसी प्रॉडक्ट की कुछ सुविधाओं के बारे में बताया जाता है. मोबाइल पर, हम चाहते हैं कि ये आइटम अच्छी तरह से स्टैक हों और स्क्रीन का साइज़ बढ़ने पर बड़े हो जाएं.
इस इफ़ेक्ट के लिए फ़्लेक्सबॉक्स का इस्तेमाल करने पर, स्क्रीन का साइज़ बदलने पर इन एलिमेंट की जगह को अडजस्ट करने के लिए, आपको मीडिया क्वेरी की ज़रूरत नहीं पड़ेगी.
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
Deconstructed Pancake के उलट, इस उदाहरण में स्क्रीन का साइज़ बदलने पर, इसके चाइल्ड कॉम्पोनेंट रैप नहीं होते हैं. इसे आम तौर पर स्टिक फ़ुटर कहा जाता है. इस लेआउट का इस्तेमाल अक्सर वेबसाइटों और ऐप्लिकेशन, दोनों के लिए किया जाता है. यह मोबाइल ऐप्लिकेशन (फ़ुटर आम तौर पर टूलबार होता है) और वेबसाइटों (सिंगल पेज ऐप्लिकेशन अक्सर इस ग्लोबल लेआउट का इस्तेमाल करते हैं) पर काम करता है.
कॉम्पोनेंट में 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); का इस्तेमाल करने पर, ग्रिड टेंप्लेट कॉलम के लिए आपको 12 कॉलम मिलते हैं. हर कॉलम का साइज़ 1fr होता है.
.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. RAM (Repeat, Auto, MinMax): 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 again का इस्तेमाल किया है. हालांकि, इस बार आपने साफ़ तौर पर संख्या वाली वैल्यू के बजाय 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 ग्लिफ़ की चौड़ाई पर. 'actual' साइज़ 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>
आखिर में, यह आखिरी लेआउट, इमेज के आसपेक्ट रेशियो को बनाए रखने की समस्या को हल करता है. यह समस्या अक्सर आती है.
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 लाइनों के ज़रिए, इस सफ़र में हमारे साथ बने रहने के लिए धन्यवाद. ज़्यादा जानने के लिए, पूरा वीडियो देखें. साथ ही, डेमो खुद आज़माएं.