ग्रिड

सीएसएस पॉडकास्ट - 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 से कम है, लेकिन कभी भी 10em से ज़्यादा नहीं है, तो fit-content(10em) 10em से कम का ट्रैक बनाएगा.

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

fr यूनिट

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

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

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

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

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

minmax() फ़ंक्शन

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

ग्रिड कंटेनर में मौजूद खाली जगह का बराबर हिस्सा निकालने के लिए, ट्रैक को फ़ोर्स्ड करने के लिए, कम से कम वैल्यू का इस्तेमाल करें. 1fr को ट्रैक साइज़ के तौर पर, minmax(0, 1fr) से बदलें. इससे ट्रैक का साइज़ कम से कम 0 हो जाता है, कम से कम कॉन्टेंट का साइज़ नहीं. इसके बाद, GRid कंटेनर में मौजूद सभी साइज़ को अपने-आप कम कर देगा और बाकी के साइज़ को आपकी 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 पिक्सल के कम से कम साइज़ और 1fr की सीमा में फ़िट होने वाले ज़्यादा से ज़्यादा ट्रैक के लिए अनुरोध किया जा सकता है. इसके बाद, ग्रिड 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 की वैल्यू देकर, यह सुविधा चालू की जाती है. इस वैल्यू को तय करने के बाद, ग्रिड बाद में लेआउट में मौजूद आइटम लेगा और गैप को भरने के लिए उनका इस्तेमाल करेगा. इसका मतलब यह हो सकता है कि डिसप्ले, लॉजिकल ऑर्डर से डिसकनेक्ट हो जाता है.

आइटम रखने की जगह

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

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

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

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

अलाइनमेंट

ग्रिड लेआउट उन अलाइनमेंट प्रॉपर्टी का इस्तेमाल करता है जिनके बारे में आपने flexbox की गाइड में जाना गया था. ग्रिड में, 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;
}

संसाधन

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

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