लेआउट

सीएसएस पॉडकास्ट - 009: लेआउट

मान लें कि आप एक डेवलपर के तौर पर काम कर रहे हैं और आपका कोई डिज़ाइनर सहयोगी, आपको एक नई वेबसाइट का डिज़ाइन तैयार करता है. डिज़ाइन में सभी तरह के दिलचस्प लेआउट और कंपोज़िशन हैं: दो-डाइमेंशन वाले लेआउट, जो व्यूपोर्ट की चौड़ाई और ऊंचाई को ध्यान में रखते हुए बनाए जाते हैं. साथ ही, वे लेआउट भी हैं जो आसानी से बदलने वाले और सुविधाजनक हों. आप इन्हें सीएसएस की मदद से स्टाइल देने का सबसे अच्छा तरीका कैसे तय करेंगे?

सीएसएस से हमें लेआउट की समस्याओं को हल करने के कई तरीके मिलते हैं. जैसे, हॉरिज़ॉन्टल ऐक्सिस पर, वर्टिकल ऐक्सिस पर या फिर दोनों पर. कॉन्टेक्स्ट के हिसाब से लेआउट का सही तरीका चुनना मुश्किल हो सकता है. समस्या को हल करने के लिए, आपको लेआउट के एक से ज़्यादा तरीकों की ज़रूरत पड़ सकती है. इस काम में आपकी मदद करने के लिए, नीचे दिए गए मॉड्यूल में, हर सीएसएस लेआउट की खास सुविधाओं के बारे में बताया जाएगा. इनकी मदद से, इन फ़ैसलों के बारे में जानकारी दी जा सकती है.

लेआउट: संक्षिप्त इतिहास

वेब के शुरुआती दिनों में, किसी सामान्य दस्तावेज़ के मुकाबले ज़्यादा मुश्किल डिज़ाइन तैयार किए जाते थे. इन्हें <table> एलिमेंट के साथ तैयार किया जाता था. सीएसएस को विज़ुअल स्टाइल से अलग करना तब आसान हो गया, जब 90 के दशक के आखिर में ब्राउज़र में सीएसएस को बड़े पैमाने पर इस्तेमाल करना शुरू किया गया था. सीएसएस ने उन डेवलपर के लिए नई शुरुआत की है जो एचटीएमएल को छूए बिना, किसी वेबसाइट का लुक पूरी तरह बदल सकते थे. इस नई सुविधा ने सीएसएस ज़ेन गार्डन जैसे प्रोजेक्ट को प्रेरित किया. सीएसएस को सीएसएस की खूबियों के बारे में बताने के लिए बनाया गया था, ताकि ज़्यादा से ज़्यादा डेवलपर इसे सीख सकें.

वेब डिज़ाइन और ब्राउज़र टेक्नोलॉजी की हमारी ज़रूरतें बढ़ने के साथ-साथ, सीएसएस का विकास हुआ है. रेचल एंड्रू के इस लेख में बताया गया है कि समय के साथ सीएसएस का लेआउट और लेआउट को इस्तेमाल करने का हमारा तरीका कैसे विकसित हुआ है.

लेआउट: वर्तमान और भविष्य

मॉडर्न सीएसएस में बेहद शक्तिशाली लेआउट टूल है. हमारे पास लेआउट के लिए खास तौर पर सिस्टम है. साथ ही, हम अगले मॉड्यूल में Flexbox और Grid के बारे में ज़्यादा जानने से पहले, अच्छी तरह से देखेंगे कि हमारे पास क्या है.

display प्रॉपर्टी के बारे में जानकारी

display प्रॉपर्टी दो काम करती है. सबसे पहले यह तय किया जाता है कि बॉक्स को इनलाइन या ब्लॉक करने के लिए लागू किया गया है या नहीं.

.my-element {
  display: inline;
}

इनलाइन एलिमेंट, वाक्य में शब्दों की तरह काम करते हैं. वे इनलाइन दिशा में एक-दूसरे के बगल में बैठते हैं. <span> और <strong> जैसे एलिमेंट का इस्तेमाल, आम तौर पर <p> (पैराग्राफ़) जैसे एलिमेंट वाले टेक्स्ट के हिस्सों को स्टाइल देने के लिए किया जाता है. ये एलिमेंट डिफ़ॉल्ट रूप से इनलाइन होते हैं. वे आस-पास की खाली सफ़ेद जगह को भी बनाए रखते हैं.

इनलाइन एलिमेंट पर चौड़ाई और ऊंचाई साफ़ तौर पर सेट नहीं की जा सकती. ब्लॉक लेवल के किसी भी मार्जिन और पैडिंग को आस-पास के एलिमेंट अनदेखा कर दिए जाएंगे.

.my-element {
    display: block;
}

ब्लॉक करने वाले एलिमेंट, एक-दूसरे के बगल में नहीं दिखते. वे अपने लिए एक नई लाइन बनाते हैं. जब तक कोई दूसरा सीएसएस कोड नहीं बदलता, तब तक ब्लॉक एलिमेंट का साइज़ बड़ा होकर इनलाइन डाइमेंशन के साइज़ तक बढ़ेगा. इससे हॉरिज़ॉन्टल राइटिंग मोड में पूरी चौड़ाई में फैलाया जा सकेगा. ब्लॉक एलिमेंट के सभी किनारों के मार्जिन को ध्यान में रखा जाएगा.

.my-element {
    display: flex;
}

display प्रॉपर्टी से यह भी तय होता है कि किसी एलिमेंट में शामिल चाइल्ड को कैसे काम करना चाहिए. उदाहरण के लिए, display प्रॉपर्टी को display: flex पर सेट करने से, बॉक्स ब्लॉक-लेवल का बॉक्स बन जाता है. साथ ही, इसके चाइल्ड आइटम, फ़्लेक्सिबल आइटम में बदल जाते हैं. यह अलाइनमेंट, ऑर्डर, और फ़्लो को कंट्रोल करने वाली फ़्लेक्स प्रॉपर्टी को चालू करता है.

फ़्लेक्सबॉक्स और ग्रिड

लेआउट के दो मुख्य तरीके हैं, जो कई एलिमेंट के लिए लेआउट के नियम बनाते हैं, फ़्लेक्सबॉक्स और ग्रिड. दोनों में एक जैसी चीज़ें हैं, लेकिन उन्हें लेआउट की अलग-अलग समस्याओं को हल करने के लिए डिज़ाइन किया गया है.

फ़्लेक्सबॉक्स

.my-element {
    display: flex;
}

Flexbox, एक डाइमेंशन वाले लेआउट बनाने का एक तरीका है. एक ऐक्सिस पर लेआउट, हॉरिज़ॉन्टल या वर्टिकल तरीके से. डिफ़ॉल्ट रूप से, फ़्लेक्सबॉक्स एलिमेंट के चाइल्ड एलिमेंट को इनलाइन दिशा में अलाइन करेगा और उन्हें ब्लॉक की दिशा में स्ट्रेच करेगा, ताकि सभी एलिमेंट की ऊंचाई एक जैसी हो.

आइटम एक ही ऐक्सिस पर रहेंगे. जगह खत्म हो जाने पर वे रैप नहीं होंगे. इसके बजाय, वे एक-दूसरे की तरह समान लाइन पर स्क्वॉश करने की कोशिश करेंगे. align-items, justify-content, और flex-wrap प्रॉपर्टी का इस्तेमाल करके, इस व्यवहार को बदला जा सकता है.

Flexbox, चाइल्ड एलिमेंट को फ़्लेक्स आइटम में भी बदल देता है, इसका मतलब है कि एक फ़्लेक्सिबल कंटेनर के अंदर वे कैसे काम करते हैं, इसके लिए नियम लिखे जा सकते हैं. आपके पास किसी एक आइटम के अलाइनमेंट, क्रम, और वजह में बदलाव करने का विकल्प होता है. flex प्रॉपर्टी का इस्तेमाल करके, सिकुड़ने या बढ़ने का तरीका भी बदला जा सकता है.

.my-element div {
    flex: 1 0 auto;
}

flex प्रॉपर्टी, flex-grow, flex-shrink, और flex-basis के लिए शॉर्टहैंड है. ऊपर दिए गए उदाहरण को इस तरह बड़ा किया जा सकता है:

.my-element div {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

डेवलपर इन कम-लेवल के नियमों को उपलब्ध कराते हैं, ताकि ब्राउज़र को संकेत दिया जा सके कि कॉन्टेंट और व्यूपोर्ट डाइमेंशन से चुनौती मिलने पर लेआउट को कैसा व्यवहार करना चाहिए. इस वजह से, यह रिस्पॉन्सिव वेब डिज़ाइन बनाने का बहुत अच्छा तरीका है.

ग्रिड

.my-element {
    display: grid;
}

ग्रिड कई तरीकों से flexbox के समान है, लेकिन इसे सिंगल-ऐक्सिस लेआउट (वर्टिकल या हॉरिज़ॉन्टल स्पेस) के बजाय, मल्टी-ऐक्सिस लेआउट को कंट्रोल करने के लिए डिज़ाइन किया गया है.

ग्रिड की मदद से, display: grid वाले एलिमेंट पर लेआउट के नियम लिखे जा सकते हैं. साथ ही, यह लेआउट स्टाइलिंग के लिए, कुछ नए प्रिमिटिव इस्तेमाल करता है. जैसे, repeat() और minmax() फ़ंक्शन. एक उपयोगी ग्रिड यूनिट fr है—जो बची हुई जगह का एक छोटा सा हिस्सा है—आपके पास तीन सीएसएस प्रॉपर्टी वाली हर आइटम के बीच अंतर के साथ 12 कॉलम वाली पारंपरिक ग्रिड बनाने का विकल्प है:

.my-element {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

ऊपर दिए गए उदाहरण में सिंगल ऐक्सिस लेआउट दिखाया गया है. जहां फ़्लेक्सबॉक्स आम तौर पर आइटम को एक ग्रुप के तौर पर देखता है, ग्रिड आपको दो डाइमेंशन में उसके प्लेसमेंट पर सटीक कंट्रोल देता है. हम तय कर सकते हैं कि इस ग्रिड का पहला आइटम दो लाइन और तीन कॉलम का होगा:

.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

grid-row और grid-column प्रॉपर्टी, ग्रिड के पहले एलिमेंट को चौथे कॉलम की शुरुआत तक और फिर पहली पंक्ति से तीसरी पंक्ति तक स्पैन करने का निर्देश देती हैं.

फ़्लो लेआउट

ग्रिड या फ़्लेक्सबॉक्स का इस्तेमाल न करने पर, आपके एलिमेंट सामान्य फ़्लो में दिखते हैं. लेआउट के ऐसे कई तरीके हैं जिनका इस्तेमाल करके, सामान्य तरीके से आइटम के व्यवहार और उनकी पोज़िशन को अडजस्ट किया जा सकता है.

इनलाइन ब्लॉक

याद रखें कि आस-पास के एलिमेंट, इनलाइन एलिमेंट पर ब्लॉक मार्जिन और पैडिंग का पालन कैसे नहीं करते हैं? inline-block के साथ आप ऐसा कर सकते हैं.

p span {
    display: inline-block;
}

inline-block का इस्तेमाल करने पर, आपको एक बॉक्स मिलता है, जिसमें ब्लॉक-लेवल के एलिमेंट की कुछ विशेषताएं होती हैं. हालांकि, यह अब भी टेक्स्ट के साथ इनलाइन फ़्लो करता है.

p span {
    margin-top: 0.5rem;
}

फ़्लोट

अगर आपके पास कोई इमेज है, जो टेक्स्ट के किसी पैराग्राफ़ में दिखाई देती है, तो क्या उस इमेज को इस तरह रैप करना आसान नहीं होगा जैसा कि आपको अखबार में दिख रहा हो? फ़्लोट की मदद से ऐसा किया जा सकता है.

img {
    float: left;
    margin-right: 1em;
}

float प्रॉपर्टी, किसी एलिमेंट को तय की गई दिशा में "फ़्लोट" करने के निर्देश देती है. इस उदाहरण में दी गई इमेज को बाईं ओर फ़्लोट करने का निर्देश दिया गया है, जो सिबलिंग एलिमेंट को इसके चारों ओर "रैप" करने देती है. किसी एलिमेंट को left, right या inherit फ़्लोट करने का निर्देश दिया जा सकता है.

मल्टी-कॉलम लेआउट

अगर आपके पास एलिमेंट की एक लंबी सूची है, जैसे कि दुनिया के सभी देशों की सूची, तो इससे उपयोगकर्ता का बहुत स्क्रोल किया जा सकता है और उसका समय बर्बाद हो सकता है. इसकी वजह से, पेज पर खाली सफ़ेद जगह भी बन सकती है. सीएसएस मल्टीकॉलम की मदद से, इसे एक से ज़्यादा कॉलम में बांटा जा सकता है, ताकि इन दोनों समस्याओं को हल किया जा सके.

<h1>All countries</h1>
<ul class="countries">
  <li>Argentina</li>
  <li>Aland Islands</li>
  <li>Albania</li>
  <li>Algeria</li>
  <li>American Samoa</li>
  <li>Andorra</li>
  …
</ul>

.countries {
    column-count: 2;
    column-gap: 1em;
}

इससे उस लंबी सूची को अपने-आप दो कॉलम में बांट दिया जाता है और दोनों कॉलम के बीच गैप आ जाता है.

.countries {
    width: 100%;
    column-width: 260px;
    column-gap: 1em;
}

कॉन्टेंट को बांटने के लिए, कॉलम की संख्या सेट करने के बजाय, column-width का इस्तेमाल करके, अपने हिसाब से कम से कम चौड़ाई भी तय की जा सकती है. व्यूपोर्ट में ज़्यादा जगह उपलब्ध होने पर, जैसे-जैसे ज़्यादा कॉलम अपने-आप बने और स्पेस कम होगा, कॉलम भी कम हो जाएंगे. यह रिस्पॉन्सिव वेब डिज़ाइन के कॉन्टेक्स्ट में बहुत काम आता है.

स्थिति

आखिरी बार, लेआउट मैकेनिज़्म की खास जानकारी आपको पोज़िशनिंग पर आधारित होती है. position प्रॉपर्टी से तय होता है कि दस्तावेज़ के सामान्य फ़्लो में, एलिमेंट कैसे काम करता है और वह दूसरे एलिमेंट से कैसे जुड़ा. relative, absolute, fixed, और sticky जैसे विकल्प उपलब्ध हैं. इनकी डिफ़ॉल्ट वैल्यू static है.

.my-element {
  position: relative;
  top: 10px;
}

इस एलिमेंट को दस्तावेज़ में इसकी मौजूदा पोज़िशन के आधार पर 10 पिक्सल नीचे किया गया है, क्योंकि यह उसी जगह पर है. position: relative को किसी एलिमेंट में जोड़ने से, वह position: absolute वाले सभी चाइल्ड एलिमेंट वाला ब्लॉक भी बन जाता है. इसका मतलब है कि जब इस एलिमेंट पर कोई निरपेक्ष पोज़िशन लागू की जाएगी, तब इसके चाइल्ड को सबसे ऊपर वाले मिलते-जुलते पैरंट की जगह, इस खास एलिमेंट में बदल दिया जाएगा.

.my-element {
  position: relative;
  width: 100px;
  height: 100px;
}

.another-element {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

position को absolute पर सेट करने पर, यह एलिमेंट को दस्तावेज़ के मौजूदा फ़्लो से हटा देता है. इसका मतलब है दो बातें:

1. top, right, bottom, और left का इस्तेमाल करके, इस एलिमेंट को जहां चाहें वहां रखा जा सकता है. इसके लिए, सबसे करीबी पैरंट फ़ोल्डर का इस्तेमाल किया जा सकता है.
2. किसी एलिमेंट के आस-पास का सारा कॉन्टेंट, उस एलिमेंट के बाकी बचे हिस्से को भरने के लिए फिर से फ़्लो करता है.

fixed की position वैल्यू वाला एलिमेंट, absolute की तरह काम करता है और उसका पैरंट एलिमेंट <html> एलिमेंट होता है. फ़िक्स्ड पोज़िशन के एलिमेंट, आपकी सेट की गई top, right, bottom, और left वैल्यू के आधार पर, सबसे ऊपर बाईं ओर ऐंकर होते हैं.

sticky का इस्तेमाल करके, fixed के ऐंकर और तय पहलुओं को पाया जा सकता है. साथ ही, relative के दस्तावेज़ के फ़्लो को प्राथमिकता देने वाले उन पहलुओं को भी हासिल किया जा सकता है जिनके बारे में पहले से अनुमान लगाया जा सकता है. इस वैल्यू का इस्तेमाल करने पर, जब व्यूपोर्ट एलिमेंट से स्क्रोल करता है, तो यह आपकी सेट की गई top, right, bottom, और left वैल्यू के साथ ऐंकर बना रहता है.

रैप-अप

CSS लेआउट के साथ कई विकल्प और विकल्प हैं. सीएसएस Flexbox और Grid की सुविधाओं के बारे में ज़्यादा जानने के लिए, अगले कुछ मॉड्यूल में जारी रखें.

आपने जो सीखा है उसकी जांच करें

लेआउट के बारे में अपनी जानकारी को परखें