ग्रिड

The CSS Podcast - 011: Grid

वेब डिज़ाइन में हेडर, साइडबार, मुख्य हिस्सा, और फ़ुटर लेआउट का इस्तेमाल बहुत आम है.

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

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

खास जानकारी

तो ग्रिड की मदद से क्या-क्या किया जा सकता है? ग्रिड लेआउट में ये सुविधाएं होती हैं. इस गाइड में आपको इन सभी के बारे में जानकारी मिलेगी.

1. ग्रिड को पंक्तियों और कॉलम के साथ तय किया जा सकता है. आपके पास इन पंक्ति और कॉलम ट्रैक का साइज़ तय करने का विकल्प होता है. इसके अलावा, ये कॉन्टेंट के साइज़ के हिसाब से भी बदल सकते हैं.
2. ग्रिड कंटेनर के डायरेक्ट चाइल्ड, इस ग्रिड में अपने-आप दिखने लगेंगे.
3. इसके अलावा, आइटम को अपनी पसंद की जगह पर भी रखा जा सकता है.
4. ग्रिड पर मौजूद लाइनों और एरिया को नाम दिया जा सकता है, ताकि प्लेसमेंट आसानी से किया जा सके.
5. ग्रिड कंटेनर में खाली जगह को ट्रैक के बीच बांटा जा सकता है.
6. ग्रिड आइटम को उनके एरिया में अलाइन किया जा सकता है.

ग्रिड की शब्दावली

ग्रिड में कई नई शब्दावली शामिल है, क्योंकि सीएसएस में पहली बार एक असल लेआउट सिस्टम है.

ग्रिड लाइन

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

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

ग्रिड ट्रैक

ट्रैक, दो ग्रिड लाइन के बीच का स्पेस होता है. पंक्ति ट्रैक, दो पंक्ति लाइनों के बीच होता है और कॉलम ट्रैक, दो कॉलम लाइनों के बीच होता है. ग्रिड बनाते समय, हम इन ट्रैक को साइज़ असाइन करके बनाते हैं.

ग्रिड सेल

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

ग्रिड का क्षेत्र

कई ग्रिड सेल एक साथ. ग्रिड एरिया बनाने के लिए, किसी आइटम को एक से ज़्यादा ट्रैक पर फैलाया जाता है.

गैप

ट्रैक के बीच गटर या गली. साइज़ तय करने के लिए, ये सामान्य ट्रैक की तरह काम करते हैं. गैप में कॉन्टेंट नहीं डाला जा सकता. हालांकि, ग्रिड आइटम को गैप में स्पैन किया जा सकता है.

ग्रिड कंटेनर

वह एचटीएमएल एलिमेंट जिस पर display: grid लागू है, इसलिए सीधे चाइल्ड एलिमेंट के लिए नया ग्रिड फ़ॉर्मैटिंग कॉन्टेक्स्ट बनाता है.

.container {
  display: grid;
}

ग्रिड आइटम

ग्रिड आइटम, ग्रिड कंटेनर का डायरेक्ट चाइल्ड होता है.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

पंक्तियां और कॉलम

बेसिक ग्रिड बनाने के लिए, तीन कॉलम ट्रैक, दो पंक्ति ट्रैक, और ट्रैक के बीच 10 पिक्सल का गैप तय किया जा सकता है. इसके लिए, यह तरीका अपनाएं.

.container {
    display: grid;
    grid-template-columns: 5em 100px 30%;
    grid-template-rows: 200px auto;
    gap: 10px;
}

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

अगर .container क्लास वाले एलिमेंट में चाइल्ड आइटम हैं, तो वे तुरंत इस ग्रिड पर लेआउट हो जाएंगे. इसे काम करते हुए देखने के लिए, यहां दिया गया डेमो देखें:

Chrome DevTools में ग्रिड ओवरले की मदद से, ग्रिड के अलग-अलग हिस्सों को समझा जा सकता है.

Chrome में डेमो खोलें. स्लेटी रंग के बैकग्राउंड वाले उस एलिमेंट की जांच करें जिसका आईडी container है. .container एलिमेंट के बगल में, डीओएम में ग्रिड बैज चुनकर ग्रिड को हाइलाइट करें. अपने ग्रिड पर लाइन नंबर देखने के लिए, लेआउट टैब में ओवरले डिसप्ले सेटिंग में जाकर, ड्रॉप-डाउन में लाइन नंबर दिखाएं को चुनें.

इंट्रिन्सिक साइज़िंग कीवर्ड

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

• min-content
• max-content
• fit-content()

min-content कीवर्ड, ट्रैक को उतना छोटा कर देगा जितना हो सकता है. हालांकि, ऐसा करने पर ट्रैक का कॉन्टेंट ओवरफ़्लो नहीं होगा. उदाहरण के तौर पर दिए गए ग्रिड लेआउट को बदलकर, तीन कॉलम वाले ट्रैक को min-content साइज़ पर सेट करने का मतलब है कि वे ट्रैक में मौजूद सबसे लंबे शब्द के बराबर ही छोटे हो जाएंगे.

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

fit-content() फ़ंक्शन, पहले max-content की तरह काम करता है. हालांकि, जब ट्रैक का साइज़, फ़ंक्शन में डाले गए साइज़ तक पहुंच जाता है, तो कॉन्टेंट रैप होने लगता है. इसलिए, अगर max-content का साइज़ 10em से कम है, तो fit-content(10em) 10em से कम का ट्रैक बनाएगा. हालांकि, यह कभी भी 10em से ज़्यादा नहीं होगा.

अगले डेमो में, ग्रिड ट्रैक का साइज़ बदलकर, अलग-अलग इंट्रिन्सिक साइज़िंग कीवर्ड आज़माएं.

fr यूनिट

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

fr यूनिट, फ़्लेक्सबॉक्स में flex: auto का इस्तेमाल करने के तरीके से मिलती-जुलती है. आइटम को व्यवस्थित करने के बाद, यह स्पेस बांटता है. इसलिए, तीन कॉलम बनाने के लिए, जिनमें सभी को उपलब्ध जगह का बराबर हिस्सा मिले:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

फ़्रेम यूनिट, उपलब्ध जगह को बांटती है. इसलिए, इसे तय साइज़ के गैप या तय साइज़ के ट्रैक के साथ जोड़ा जा सकता है. अगर आपको किसी कॉम्पोनेंट में तय साइज़ का एलिमेंट और बाकी जगह पर दूसरा ट्रैक दिखाना है, तो grid-template-columns: 200px 1fr की ट्रैकलिस्टिंग का इस्तेमाल करें.

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

minmax() फ़ंक्शन

इस फ़ंक्शन का मतलब है कि किसी ट्रैक के लिए, कम से कम और ज़्यादा से ज़्यादा साइज़ सेट किया जा सकता है. यह काफ़ी मददगार हो सकता है. अगर हम बाकी जगह को बांटने वाली fr यूनिट के पिछले उदाहरण को लेते हैं, तो इसे minmax(auto, 1fr) के तौर पर लिखा जा सकता है. इसके लिए, minmax() का इस्तेमाल किया जा सकता है. ग्रिड, कॉन्टेंट के साइज़ को ध्यान में रखता है. इसके बाद, कॉन्टेंट को ज़रूरत के मुताबिक जगह देने के बाद, उपलब्ध जगह को बांटता है. इसका मतलब है कि आपको ऐसे ट्रैक नहीं मिल सकते जिनमें ग्रिड कंटेनर में उपलब्ध सभी स्पेस का बराबर हिस्सा हो.

किसी ट्रैक को ग्रिड कंटेनर में, गैप को छोड़कर बचे हुए स्पेस का बराबर हिस्सा देने के लिए, minmax का इस्तेमाल करें. ट्रैक के साइज़ के तौर पर 1fr को minmax(0, 1fr) से बदलें. इससे ट्रैक का कम से कम साइज़ 0 हो जाता है, न कि कम से कम कॉन्टेंट का साइज़. इसके बाद, ग्रिड कंटेनर में उपलब्ध सभी साइज़ का इस्तेमाल करेगा, किसी भी गैप के लिए ज़रूरी साइज़ घटाएगा, और बाकी साइज़ को आपकी fr यूनिट के हिसाब से बांटेगा.

repeat() नोटेशन

अगर आपको बराबर कॉलम वाला 12 कॉलम का ट्रैक ग्रिड बनाना है, तो यहां दी गई सीएसएस का इस्तेमाल करें.

.container {
    display: grid;
    grid-template-columns:
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr);
}

इसके अलावा, repeat() का इस्तेमाल करके भी इसे लिखा जा सकता है:

.container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
}

repeat() फ़ंक्शन का इस्तेमाल, ट्रैक की लिस्टिंग के किसी भी सेक्शन को दोहराने के लिए किया जा सकता है. उदाहरण के लिए, ट्रैक का कोई पैटर्न दोहराया जा सकता है. इसमें कुछ सामान्य ट्रैक और बार-बार चलने वाला सेक्शन भी हो सकता है.

.container {
    display: grid;
    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fill और auto-fit

ट्रैक के साइज़, minmax(), और दोहराए जाने के बारे में जो कुछ भी आपने सीखा है उसे ग्रिड लेआउट के साथ एक काम का पैटर्न बनाने के लिए जोड़ा जा सकता है. हो सकता है कि आपको कॉलम ट्रैक की संख्या तय न करनी हो, बल्कि आपको अपने कंटेनर में जितने ट्रैक फ़िट होंगे उतने बनाने हों.

ऐसा करने के लिए, repeat() और auto-fill या auto-fit कीवर्ड का इस्तेमाल करें. यहां दिए गए डेमो में, ग्रिड उतने ही 200 पिक्सल वाले ट्रैक बनाएगा जितने कंटेनर में फ़िट होंगे. डेमो को नई विंडो में खोलें और देखें कि व्यूपोर्ट का साइज़ बदलने पर, ग्रिड में क्या बदलाव होता है.

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

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

auto-fill और auto-fit में थोड़ा अंतर है. अगले डेमो में, पहले बताए गए सिंटैक्स का इस्तेमाल करके ग्रिड लेआउट के साथ चलाएं, लेकिन ग्रिड कंटेनर में सिर्फ़ दो ग्रिड आइटम के साथ. auto-fill कीवर्ड का इस्तेमाल करके, यह देखा जा सकता है कि खाली ट्रैक बनाए गए हैं. कीवर्ड को auto-fit में बदलें और ट्रैक का साइज़ 0 पर सेट हो जाएगा. इसका मतलब है कि अब फ़्लेक्सिबल ट्रैक, स्टोरेज का ज़्यादा इस्तेमाल करते हैं.

इसके अलावा, auto-fill और auto-fit कीवर्ड एक ही तरह से काम करते हैं. पहला ट्रैक भर जाने के बाद, दोनों में कोई अंतर नहीं होता.

विज्ञापन के लिए अपने-आप जगह तय होने की सुविधा

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

आइटम को कॉलम में डालना

ग्रिड लेआउट में, आइटम को डिफ़ॉल्ट रूप से पंक्तियों में रखा जाता है. इसके बजाय, grid-auto-flow: column का इस्तेमाल करके आइटम को कॉलम में रखा जा सकता है. आपको पंक्ति ट्रैक तय करने होंगे. ऐसा न करने पर, आइटम में इनट्रिन्सिक कॉलम ट्रैक बन जाएंगे और सभी आइटम एक लंबी पंक्ति में लेआउट हो जाएंगे.

ये वैल्यू, दस्तावेज़ के लिखने के मोड से जुड़ी होती हैं. लाइन हमेशा उसी दिशा में चलती है जिस दिशा में दस्तावेज़ या कॉम्पोनेंट के राइटिंग मोड में वाक्य चलता है. अगले डेमो में, grid-auto-flow और writing-mode प्रॉपर्टी की वैल्यू को बदला जा सकता है.

स्पैनिंग ट्रैक

अपने-आप प्लेस होने वाले लेआउट में, कुछ या सभी आइटम को एक से ज़्यादा ट्रैक में दिखाया जा सकता है. grid-column-end या grid-row-end की वैल्यू के तौर पर, span कीवर्ड के साथ-साथ उन लाइनों की संख्या का इस्तेमाल करें जिन्हें स्पैन करना है.

.item {
    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}

आपने grid-column-start की वैल्यू नहीं दी है. इसलिए, इसमें auto की शुरुआती वैल्यू का इस्तेमाल किया जाता है. साथ ही, इसे अपने-आप प्लेसमेंट के नियमों के मुताबिक रखा जाता है. शॉर्टहैंड grid-column का इस्तेमाल करके भी यही जानकारी दी जा सकती है:

.item {
    grid-column: auto / span 2;
}

खाली जगहों को भरना

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

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

आइटम डालना

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

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

इन प्रॉपर्टी का इस्तेमाल करके, आइटम को लाइन नंबर के हिसाब से रखा जा सकता है:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

इनमें शॉर्टहैंड होते हैं, जिनकी मदद से शुरुआत और आखिर की लाइन, दोनों को एक साथ सेट किया जा सकता है:

• grid-column
• grid-row

आइटम को उस ग्रिड एरिया में डालने के लिए, उसकी शुरुआत और आखिर की लाइनें सेट करें.

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px 100px);
}

.item {
    grid-column-start: 1; /* start at column line 1 */
    grid-column-end: 4; /* end at column line 4 */
    grid-row-start: 2; /*start at row line 2 */
    grid-row-end: 4; /* end at row line 4 */
}

Chrome DevTools, आपको लाइनों के लिए विज़ुअल गाइड दे सकता है, ताकि यह देखा जा सके कि आपका आइटम कहां रखा गया है.

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

आइटम स्टैक करना

लाइन-आधारित पोज़िशनिंग का इस्तेमाल करके, आइटम को ग्रिड की एक ही सेल में रखा जा सकता है. इसका मतलब है कि आइटम को स्टैक किया जा सकता है या एक आइटम को दूसरे आइटम पर कुछ हद तक ओवरलैप किया जा सकता है. सोर्स में बाद में आने वाले आइटम, पहले आने वाले आइटम के ऊपर दिखेंगे. z-index का इस्तेमाल करके, इस स्टैकिंग ऑर्डर को बदला जा सकता है. ठीक उसी तरह जैसे पोज़िशन किए गए आइटम के लिए किया जाता है.

नेगेटिव लाइन नंबर

grid-template-rows और grid-template-columns का इस्तेमाल करके ग्रिड बनाने पर, एक्सप्लिश ग्रिड बनता है. यह एक ऐसा ग्रिड है जिसे आपने तय किया है और ट्रैक का साइज़ तय किया है.

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

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

नेगेटिव लाइन नंबर का इस्तेमाल करके, एक्सप्लिश ग्रिड की आखिरी लाइन से आइटम डाले जा सकते हैं. अगर आपको किसी आइटम को कॉलम की पहली से आखिरी लाइन तक फैलाना है, तो यह तरीका अपनाएं. ऐसे में, grid-column: 1 / -1 का इस्तेमाल किया जा सकता है. आइटम, साफ़ तौर पर दिखने वाले ग्रिड में पूरी तरह से फैल जाएगा.

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

आपको लगता है कि उस आइटम को grid-row: 1 / -1 को दिया जा सकता है. नीचे दिए गए डेमो में, यह देखा जा सकता है कि यह तरीका काम नहीं करता. ट्रैक, इंप्लिसिट ग्रिड में बनाए जाते हैं.-1 का इस्तेमाल करके, ग्रिड के आखिर तक नहीं पहुंचा जा सकता.

इंप्लिसिट ट्रैक का साइज़ तय करना

इंप्लिसिट ग्रिड में बनाए गए ट्रैक का साइज़, डिफ़ॉल्ट रूप से अपने-आप सेट हो जाएगा. हालांकि, अगर आपको पंक्तियों का साइज़ कंट्रोल करना है, तो grid-auto-rows प्रॉपर्टी का इस्तेमाल करें. साथ ही, कॉलम के लिए grid-auto-columns का इस्तेमाल करें.

सभी इनपुट पंक्तियों को कम से कम 10em और ज़्यादा से ज़्यादा auto के साइज़ में बनाने के लिए:

.container {
    display: grid;
    grid-auto-rows: minmax(10em, auto);
}

100 पिक्सल और 200 पिक्सल चौड़े ट्रैक के पैटर्न वाले कॉलम बनाने के लिए. इस मामले में, पहला कॉलम 100 पिक्सल, दूसरा 200 पिक्सल, तीसरा 100 पिक्सल वगैरह होगा.

.container {
    display: grid;
    grid-auto-columns: 100px 200px;
}

नाम वाली ग्रिड लाइन

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

.container {
    display: grid;
    grid-template-columns:
      [main-start aside-start] 1fr
      [aside-end content-start] 2fr
      [content-end main-end]; /* a two column layout */
}

.sidebar {
    grid-column: aside-start / aside-end;
    /* placed between line 1 and 2*/
}

footer {
    grid-column: main-start / main-end;
    /* right across the layout from line 1 to line 3*/
}

ग्रिड टेंप्लेट के सेक्शन

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

शुरू करने के लिए, grid-area प्रॉपर्टी का इस्तेमाल करके, अपने ग्रिड कंटेनर के डायरेक्ट चाइल्ड को नाम दें:

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

नाम में auto और span कीवर्ड के अलावा, कोई भी नाम इस्तेमाल किया जा सकता है. सभी आइटम के नाम तय करने के बाद, grid-template-areas प्रॉपर्टी का इस्तेमाल करके तय करें कि हर आइटम किन ग्रिड सेल में दिखेगा. हर लाइन को कोटेशन में रखा जाता है.

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "header header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

grid-template-areas का इस्तेमाल करते समय, कुछ नियमों का पालन करना ज़रूरी है.

• वैल्यू एक पूरा ग्रिड होना चाहिए, जिसमें कोई खाली सेल न हो.
• ट्रैक को स्पैन करने के लिए, नाम दोहराएं.
• नाम दोहराकर बनाए गए एरिया, रेक्टैंगल होने चाहिए और उन्हें अलग नहीं किया जा सकता.

अगर आपने ऊपर दिए गए किसी भी नियम का उल्लंघन किया है, तो वैल्यू को अमान्य माना जाएगा और उसे हटा दिया जाएगा.

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

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "....... header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

आपका पूरा लेआउट एक ही जगह पर तय होता है. इसलिए, मीडिया क्वेरी का इस्तेमाल करके लेआउट को फिर से तय करना आसान हो जाता है. अगले उदाहरण में, मैंने दो कॉलम वाला लेआउट बनाया है. इसमें grid-template-columns और grid-template-areas की वैल्यू को फिर से तय करके, तीन कॉलम बनाए गए हैं. व्यूपोर्ट के साइज़ में बदलाव करने और लेआउट में हुए बदलाव को देखने के लिए, उदाहरण को नई विंडो में खोलें.

यह भी देखा जा सकता है कि grid-template-areas प्रॉपर्टी, writing-mode और दिशा से कैसे जुड़ी है, जैसे कि ग्रिड के अन्य तरीकों के साथ.

शॉर्टहैंड प्रॉपर्टी

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

grid-template

grid-template प्रॉपर्टी, grid-template-rows, grid-template-columns, और grid-template-areas के लिए शॉर्टहैंड है. grid-template-areas की वैल्यू के साथ-साथ, पंक्तियों को पहले तय किया जाता है. कॉलम का साइज़, / के बाद जोड़ा जाता है.

.container {
    display: grid;
    grid-template:
      "head head head" minmax(150px, auto)
      "sidebar content content" auto
      "sidebar footer footer" auto / 1fr 1fr 1fr;
}

grid प्रॉपर्टी

grid के शॉर्टहैंड का इस्तेमाल ठीक उसी तरह किया जा सकता है जिस तरह grid-template के शॉर्टहैंड का इस्तेमाल किया जाता है. इस तरह इस्तेमाल करने पर, यह उन अन्य ग्रिड प्रॉपर्टी को उनकी शुरुआती वैल्यू पर रीसेट कर देगा जिन्हें यह स्वीकार करती है. पूरा सेट इस तरह है:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

इस शॉर्टहैंड का इस्तेमाल करके, यह तय किया जा सकता है कि इंप्लिसिट ग्रिड कैसे काम करे. उदाहरण के लिए:

.container {
    display: grid;
    grid: repeat(2, 80px) / auto-flow  120px;
}

सबग्रिड

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

नेस्ट किए गए ग्रिड में पैरंट के ग्रिड कॉलम का इस्तेमाल करने के लिए, grid-template-columns: subgrid सेट करें. नेस्ट किए गए ग्रिड में पैरंट ग्रिड की पंक्तियों का इस्तेमाल करने के लिए, grid-template-rows: subgrid सेट करें. subgrid का इस्तेमाल पंक्तियों और कॉलम, दोनों के लिए किया जा सकता है.

यहां दिए गए डेमो में, gallery क्लास वाला एक ग्रिड है, जिसमें कुछ ऐसे कॉलम हैं जिनकी चौड़ाई में बदलाव किया जा सकता है. इसमें grid-template-rows डेफ़िनिशन नहीं होती, इसलिए पंक्ति का साइज़ कॉन्टेंट से तय होता है. गैलरी में मौजूद ग्रिड आइटम भी ग्रिड कंटेनर होते हैं. ये अगली उपलब्ध पंक्ति (auto) से शुरू होते हैं और दो ट्रैक में होते हैं. आखिर में, सबग्रिड का इस्तेमाल grid-template-rows प्रॉपर्टी के लिए किया जाता है. इससे अलग-अलग gallery-item ग्रिड, एक ही ग्रिड ट्रैक साइज़िंग शेयर कर सकते हैं. इस लाइन को हटाने पर, आपको दिखेगा कि कैप्शन अब अलाइन नहीं हैं.

कॉलम और पंक्तियों में सबग्रिड लागू करना

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

.container {
  display: grid;
  gap: 1em;
  grid-template-columns: auto 2fr 1fr auto;
  grid-template-rows: 5fr 1fr 2fr 1fr;
}

ग्रिड के एक आइटम में भी display: grid है और इसे पैरंट ग्रिड के दो कॉलम और तीन पंक्तियों में दिखाने के लिए सेट किया गया है. subgrid वैल्यू जोड़ने से पहले, नेस्ट किए गए ग्रिड में मौजूद आइटम, पैरंट ग्रिड में मौजूद ग्रिड आइटम के साथ अलाइन नहीं होते.

.subgrid-container {
  display: grid;
  grid-column: auto / span 2;
  grid-row: auto / span 3;
}

अलाइनमेंट

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

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

• justify-content और align-content: ट्रैक के आस-पास या उनके बीच, ग्रिड कंटेनर में अतिरिक्त स्पेस बांटें.
• justify-self और align-self: इन्हें ग्रिड आइटम पर लागू किया जाता है, ताकि उसे ग्रिड के उस हिस्से में इधर-उधर ले जाया जा सके जहां उसे रखा गया है.
• justify-items और align-items: इन्हें आइटम पर सभी justify-self प्रॉपर्टी सेट करने के लिए, ग्रिड कंटेनर पर लागू किया जाता है.

ज़्यादा स्टोरेज का बंटवारा करना

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

ध्यान दें कि space-between जैसी वैल्यू का इस्तेमाल करने पर, गैप कैसे बड़े हो जाते हैं. साथ ही, दो ट्रैक में फैले किसी भी ग्रिड आइटम का साइज़ भी गैप में जोड़े गए अतिरिक्त स्पेस को अवशोषित करने के लिए बढ़ जाता है.

कॉन्टेंट को एक से दूसरी जगह ले जाना

बैकग्राउंड कलर वाले आइटम, ग्रिड के उस हिस्से को पूरी तरह से भर देते हैं जिसमें उन्हें रखा गया है. ऐसा इसलिए होता है, क्योंकि justify-self और align-self की शुरुआती वैल्यू stretch होती है.

डेमो में justify-items और align-items की वैल्यू बदलकर देखें कि इससे लेआउट में क्या बदलाव होता है. ग्रिड एरिया का साइज़ नहीं बदल रहा है, बल्कि आइटम तय किए गए एरिया में एक से दूसरी जगह मूव किए जा रहे हैं.

देखें कि आपको क्या समझ आया

ग्रिड के बारे में अपनी जानकारी को परखें

main {
  display: grid;
}

संसाधन

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

• MDN CSS ग्रिड लेआउट
• ग्रिड के बारे में पूरी गाइड
• ग्रिड कंटेनर बनाना
• Chrome DevTools में सीएसएस ग्रिड की जांच करना
• ग्रिड लर्निंग मटीरियल का बेहतरीन कलेक्शन