Developer Tools
Design Tools
Web UtilitiesCSS Grid प्लेग्राउंड
लाइव प्रीव्यू, टेम्प्लेट एरिया सपोर्ट और तत्काल CSS कोड आउटपुट के साथ CSS Grid लेआउट को विज़ुअली बनाएं। कॉलम, रो, गैप और आइटम प्लेसमेंट को इंटरैक्टिव रूप से कॉन्फ़िगर करें।
प्रीसेट
कंटेनर प्रॉपर्टी
आइटम प्रॉपर्टी
लाइव प्रीव्यू
कंटेनर CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 80px);
gap: 8px;
}आइटम CSS
.grid-item-1 {
}
.grid-item-2 {
}
.grid-item-3 {
}
.grid-item-4 {
}
.grid-item-5 {
}संबंधित टूल
CSS Grid प्लेग्राउंड के बारे में
यह कैसे काम करता है
- कंटेनर प्रॉपर्टी कॉन्फ़िगर करें: grid-template-columns, grid-template-rows, gap, justify-items, align-items, justify-content और align-content
- 8 तक ग्रिड आइटम जोड़ें और grid-column-start/end और grid-row-start/end से प्रत्येक को पोजीशन करें
- टेम्प्लेट फील्ड में span नोटेशन (जैसे span 2) या स्पष्ट लाइन नंबर उपयोग करें
- लाइव प्रीव्यू में लेआउट देखें — एडिटर में चुनने के लिए किसी भी आइटम पर क्लिक करें
- Holy Grail, Dashboard या Card Grid जैसे सामान्य लेआउट के लिए प्रीसेट लागू करें और फिर कस्टमाइज़ करें
- कंटेनर और आइटम के लिए जनरेट CSS सीधे अपने प्रोजेक्ट में कॉपी करें
सामान्य उपयोग के मामले
- तत्काल विज़ुअल फीडबैक के साथ CSS Grid प्रॉपर्टी इंटरैक्टिव रूप से सीखना
- पेज लेआउट प्रोटोटाइप करना: हेडर, साइडबार, डैशबोर्ड, कार्ड ग्रिड
- लाइन नंबर विज़ुअली ट्वीक करके ग्रिड प्लेसमेंट समस्याएं डिबग करना
- सामान्य लेआउट पैटर्न के लिए बेसिक ग्रिड CSS जनरेट करना
- छात्रों और सहयोगियों को CSS Grid सिखाना
अक्सर पूछे जाने वाले सवाल
CSS Grid प्लेग्राउंड क्या है?
CSS Grid प्लेग्राउंड एक इंटरैक्टिव ब्राउज़र टूल है जो आपको CSS Grid कंटेनर और आइटम प्रॉपर्टी को विज़ुअली कॉन्फ़िगर करने देता है। बदलाव तुरंत लाइव प्रीव्यू में दिखते हैं और उपयोग के लिए तैयार CSS कोड स्वचालित रूप से जनरेट होता है।
कौन सी कंटेनर प्रॉपर्टी कॉन्फ़िगर कर सकते हैं?
आप grid-template-columns, grid-template-rows, gap (या अलग-अलग column-gap और row-gap), justify-items, align-items, justify-content और align-content कॉन्फ़िगर कर सकते हैं। सभी वैल्यू fr यूनिट, repeat(), minmax() और auto सहित किसी भी वैध CSS सिंटैक्स को सपोर्ट करती हैं।
किसी आइटम को विशिष्ट लाइनों पर कैसे रखें?
आइटम प्रॉपर्टी पैनल में नंबर वाले टैब से आइटम चुनें, फिर grid-column-start, grid-column-end, grid-row-start और grid-row-end सेट करें। स्पष्ट ग्रिड लाइन के लिए नंबर दर्ज करें या ऑटोमैटिक प्लेसमेंट के लिए 'auto' छोड़ दें।
प्रीसेट क्या हैं और कैसे उपयोग करें?
प्रीसेट सामान्य लेआउट के लिए पूर्व-निर्मित ग्रिड कॉन्फ़िगरेशन हैं: 'Holy Grail' क्लासिक हेडर/नैव/मेन/साइड/फुटर लेआउट बनाता है, 'Sidebar + Main' दो-कॉलम साइडबार लेआउट बनाता है, '3-Col Masonry' स्पैनिंग आइटम दिखाता है, 'Dashboard' चार-कॉलम मेट्रिक्स डैशबोर्ड दिखाता है, 'Blog Layout' साइडबार वाला सामान्य आर्टिकल सेटअप करता है, और 'Card Grid' तीन-कॉलम कार्ड ग्रिड बनाता है।
grid-template-columns कौन से वैल्यू स्वीकार करता है?
grid-template-columns किसी भी वैध CSS ट्रैक लिस्टिंग स्वीकार करता है: '200px 1fr' जैसी निश्चित लंबाई, 'repeat(3, 1fr)' जैसी repeat() फ़ंक्शन, minmax(), auto-fill या auto-fit, या '[start] 1fr [end]' जैसी नामित लाइनें।
fr यूनिट और पिक्सेल में क्या अंतर है?
fr (फ्रैक्शनल) यूनिट ग्रिड कंटेनर में उपलब्ध स्पेस का एक हिस्सा दर्शाती है। '1fr 1fr 1fr' स्पेस को तीन कॉलम में बराबर बांटती है। '2fr 1fr' पहले कॉलम को दोगुनी जगह देती है। पिक्सेल वैल्यू कंटेनर के आकार की परवाह किए बिना तय रहती हैं।
justify-items और justify-content में क्या अंतर है?
justify-items नियंत्रित करता है कि आइटम इनलाइन एक्सिस पर अपनी ग्रिड सेल के अंदर कैसे अलाइन होते हैं। justify-content नियंत्रित करता है कि अतिरिक्त स्पेस होने पर पूरी ग्रिड कंटेनर के अंदर कैसे अलाइन होती है। इसी तरह, align-items ब्लॉक एक्सिस पर सेल के अंदर आइटम अलाइन करता है।
ग्रिड आइटम के लिए justify-self और align-self क्या है?
justify-self किसी एकल ग्रिड आइटम के लिए justify-items को ओवरराइड करता है। align-self किसी एकल आइटम के लिए align-items को ओवरराइड करता है। दोनों स्वीकार करते हैं: auto, start, end, center और stretch।
किसी आइटम को कई कॉलम या रो में फैलाने के लिए क्या करें?
स्पैन बनाने के लिए grid-column-start और grid-column-end (या grid-row-start और grid-row-end) सेट करें। उदाहरण के लिए, कॉलम 1 से 3 तक फैलाने के लिए start=1 और end=3 सेट करें। वैकल्पिक रूप से, start को 'auto' छोड़ें और end को 'span 2' सेट करें।
कितने ग्रिड आइटम जोड़ सकते हैं?
आप अधिकतम 8 ग्रिड आइटम जोड़ सकते हैं। अधिक जोड़ने के लिए '+ आइटम जोड़ें' बटन क्लिक करें। प्रत्येक आइटम कलर-कोडेड है ताकि आप सेटिंग पैनल और लाइव प्रीव्यू में उसे पहचान सकें।
क्या कॉलम और रो के लिए अलग-अलग गैप साइज़ उपयोग कर सकते हैं?
हाँ। डिफ़ॉल्ट रूप से एक gap वैल्यू कॉलम और रो दोनों पर लागू होती है। 'कस्टम कॉलम/रो गैप उपयोग करें' विकल्प चेक करें और अलग-अलग स्लाइडर से column-gap और row-gap स्वतंत्र रूप से सेट करें।
जनरेट CSS कैसे कॉपी करें?
दो कॉपी बटन उपलब्ध हैं: एक कंटेनर CSS ब्लॉक (.grid-container) के लिए और एक सभी CSS के लिए जिसमें आइटम रूल्स भी शामिल हैं। किसी भी 'CSS कॉपी करें' बटन पर क्लिक करें और अपने प्रोजेक्ट में पेस्ट करें।