लेआउट

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

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

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

लेआउट: छोटा इतिहास

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

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

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

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

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

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

.my-element {
  display: inline;
}

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

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

.my-element {
    display: block;
}

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

.my-element {
    display: flex;
}

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

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

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

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

.my-element {
    display: flex;
}

Flexbox, एक डाइमेंशन वाले लेआउट के लिए डिज़ाइन किया गया एक लेआउट है. एक ऐक्सिस पर, हॉरिज़ॉन्टल या वर्टिकल तौर पर लेआउट. डिफ़ॉल्ट रूप से, 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;
}

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

ग्रिड की मदद से, ऐसे एलिमेंट पर लेआउट नियम लिखा जा सकता है जिसमें 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 वैल्यू के हिसाब से दिखता है.

आखिर में खास जानकारी

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

देखें कि आपको कितना समझ आया है

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