इस गाइड में आपको Chrome DevTools के एलिमेंट पैनल में, पेज पर सीएसएस ग्रिड खोजने, उनकी जांच करने, और लेआउट की समस्याओं को डीबग करने का तरीका बताया गया है.
इस लेख में, स्क्रीनशॉट में दिखाए गए उदाहरण इन दो वेब पेजों के हैं: फ़्रूट बॉक्स और स्नैक बॉक्स.
सीएसएस ग्रिड के बारे में जानें
जब आपके पेज के किसी एचटीएमएल एलिमेंट पर display: grid या display: inline-grid लागू होता है, तो आपको
एलिमेंट पैनल में, उसके बगल में grid बैज दिखता है.
पेज पर ग्रिड ओवरले के डिसप्ले को टॉगल करने के लिए बैज पर क्लिक करें. ओवरले, एलिमेंट के ऊपर दिखता है. यह ग्रिड लाइन और ट्रैक की स्थिति दिखाने के लिए एक ग्रिड की तरह दिखता है:
लेआउट पैनल खोलें. जब किसी पेज पर ग्रिड शामिल किए जाते हैं, तो लेआउट पैनल में एक ग्रिड सेक्शन होता है, जिसमें उन ग्रिड को देखने के कई विकल्प होते हैं.
ग्रिड एडिटर की मदद से, ग्रिड में मौजूद आइटम और उनके कॉन्टेंट को अलाइन करें
सीएसएस के नियम टाइप करने के बजाय, एक बटन पर क्लिक करके ग्रिड आइटम और उनके कॉन्टेंट को अलाइन किया जा सकता है.
ग्रिड आइटम और उनके कॉन्टेंट को अलाइन करने के लिए:
एलिमेंट > स्टाइल पैनल में,
display: gridके बगल में मौजूद
ग्रिड एडिटर बटन पर क्लिक करें.
ग्रिड एडिटर में, ग्रिड आइटम और उनके कॉन्टेंट के लिए
align-*औरjustify-*सीएसएस प्रॉपर्टी सेट करने के लिए, इनसे जुड़े बटन पर क्लिक करें.
व्यूपोर्ट में, अडजस्ट किए गए ग्रिड आइटम और कॉन्टेंट देखें.
ग्रिड देखने के विकल्प
लेआउट पैनल के ग्रिड सेक्शन में दो सब सेक्शन होते हैं:
- ओवरले डिसप्ले की सेटिंग
- ग्रिड ओवरले
आइए, इनमें से हर सब-सेक्शन को गहराई से समझते हैं.
ओवरले डिसप्ले की सेटिंग
ओवरले डिसप्ले सेटिंग के दो हिस्से होते हैं:
a. एक ड्रॉप-डाउन मेन्यू, जिसमें ये विकल्प मौजूद हैं:
- लाइन लेबल छिपाएं: हर ग्रिड ओवरले के लिए लाइन लेबल छिपाएं.
- लाइन नंबर दिखाएं: हर ग्रिड ओवरले के लिए लाइन नंबर दिखाएं (डिफ़ॉल्ट रूप से चुना गया).
- लाइन के नाम दिखाएं: लाइन के नाम वाले ग्रिड के मामले में, हर ग्रिड ओवरले के लिए लाइन के नाम दिखाएं.
b. चेकबॉक्स में ये विकल्प मौजूद हैं:
- ट्रैक के साइज़ दिखाएं: ट्रैक के साइज़ दिखाने या छिपाने के लिए टॉगल करें.
- इलाके के नाम दिखाएं: नाम वाले ग्रिड वाले ग्रिड के मामले में, एरिया के नाम दिखाने या छिपाने के लिए टॉगल करें.
- ग्रिड लाइनों को बढ़ाना: डिफ़ॉल्ट रूप से, ग्रिड लाइनें सिर्फ़ एलिमेंट के अंदर दिखती हैं और उन पर
display: gridयाdisplay: inline-gridसेट होते हैं. इस विकल्प को चालू करने पर, ग्रिड लाइन हर ऐक्सिस पर व्यूपोर्ट के किनारे तक बढ़ती हैं.
आइए, इन सेटिंग के बारे में ज़्यादा बारीकी से जानें.
लाइन नंबर दिखाएं
डिफ़ॉल्ट रूप से, पॉज़िटिव और नेगेटिव लाइन नंबर, ग्रिड ओवरले पर दिखते हैं.
लाइन के लेबल छिपाएं
लाइन नंबर छिपाने के लिए, लाइन लेबल छिपाएं को चुनें.
लाइन के नाम दिखाएं
संख्याओं के बजाय, लाइन के नाम देखने के लिए, लाइन के नाम दिखाएं को चुनें. इस उदाहरण में, हमने नाम वाली चार लाइन की हैं: बाईं, बीच का 1, बीच का 2 और दाईं ओर.
इस डेमो में, सीएसएस grid-column: left / right के साथ नारंगी एलिमेंट को बाईं से दाईं ओर दिखाया गया है.
लाइन के नाम दिखाने से एलिमेंट के शुरू और खत्म होने की पोज़िशन को विज़ुअलाइज़ करना आसान हो जाता है.
ट्रैक के साइज़ दिखाएं
ग्रिड के ट्रैक साइज़ देखने के लिए, ट्रैक साइज़ दिखाएं चेकबॉक्स को चालू करें.
DevTools हर लाइन लेबल में [authored size] - [computed size] दिखाएगा: लिखा गया साइज़: स्टाइलशीट में तय किया गया साइज़ (अगर तय न किया गया हो, तो हटा दिया जाता है). कंप्यूट किया गया साइज़: स्क्रीन पर दिखने वाला असल साइज़.
इस डेमो में, snack-box कॉलम के साइज़ को सीएसएस grid-template-columns:1fr 2fr; में बताया गया है.
इसलिए, कॉलम लाइन के लेबल में तय किए गए और कंप्यूट किए गए दोनों साइज़ दिखते हैं: 1fr - 96.66px और
2fr - 193.32px.
लाइन लाइन के लेबल सिर्फ़ कंप्यूट किए गए साइज़ दिखाते हैं: 80px और 80px, क्योंकि स्टाइलशीट में कोई पंक्ति साइज़ तय नहीं किया गया है.
इलाके के नाम दिखाएं
इलाके के नाम देखने के लिए, इलाके के नाम दिखाएं चेकबॉक्स को चालू करें. इस उदाहरण में, ग्रिड में तीन एरिया हैं - top, bottom1 और bottom2.
ग्रिड लाइनों को बड़ा करें
हर ऐक्सिस पर ग्रिड लाइनों को व्यूपोर्ट के किनारे तक बढ़ाने के लिए, ग्रिड लाइन बढ़ाएं चेकबॉक्स को चालू करें.
ग्रिड ओवरले
ग्रिड ओवरले सेक्शन में, पेज पर मौजूद ग्रिड की सूची होती है. हर ग्रिड में एक चेकबॉक्स और कई विकल्प होते हैं.
एक से ज़्यादा ग्रिड के ओवरले व्यू चालू करें
एक से ज़्यादा ग्रिड के ओवरले व्यू चालू किए जा सकते हैं. इस उदाहरण में, दो ग्रिड ओवरले चालू हैं - main और div.snack-box. हर एक को अलग-अलग रंगों से दिखाया गया है.
ग्रिड ओवरले का रंग पसंद के मुताबिक बनाएं
कलर पिकर पर क्लिक करके, हर ग्रिड ओवरले का रंग अपनी पसंद के मुताबिक बनाया जा सकता है.
ग्रिड को हाइलाइट करें
एचटीएमएल एलिमेंट को तुरंत हाइलाइट करने के लिए, हाइलाइट आइकॉन पर क्लिक करें. इसके बाद, पेज पर स्क्रोल करके उस पर जाएं और एलिमेंट पैनल में जाकर उसे चुनें.
