ग्रिड

सीएसएस पॉडकास्ट - 011: ग्रिड

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

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

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

खास जानकारी

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

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 एलिमेंट के बगल में, डीओएम में ग्रिड बैज चुनकर ग्रिड को हाइलाइट करें. अपने ग्रिड पर लाइन नंबर देखने के लिए, लेआउट टैब में, ड्रॉपडाउन में लाइन नंबर दिखाएं चुनें.

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

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

• 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;
}

अलाइनमेंट

ग्रिड लेआउट, उन अलाइनमेंट प्रॉपर्टी का इस्तेमाल करता है जिनके बारे में आपको फ़्लेक्सबॉक्स की गाइड में बताया गया है. ग्रिड में, 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 में सीएसएस ग्रिड की जांच करना
• ग्रिड लर्निंग से जुड़े कॉन्टेंट का पूरा कलेक्शन