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