Developer Tools
Web Utilitiesग्रिड लेआउट डिज़ाइनर
रिस्पॉन्सिव ग्रिड लेआउट बनाने के लिए विज़ुअल CSS ग्रिड डिज़ाइनर। कॉलम, रो और गैप कस्टमाइज़ करें और तुरंत प्रोडक्शन-रेडी CSS Grid कोड जेनरेट करें।
ग्रिड कॉन्फिगरेशन
क्विक स्टार्ट टेम्पलेट
विज़ुअल ग्रिड डिज़ाइनर
जेनरेटेड कोड
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
width: 400px;
height: 300px;
}HTML
<div class="grid-container">
</div>कैसे उपयोग करें
ग्रिड पोजीशनिंग
1 / 2- starts at line 1, ends at line 21 / 3- spans 2 columns/rowsspan 2- spans 2 tracks from start position1 / -1- spans from first to last line
टिप्स
- Use fr units for flexible columns
- Try different gap values for spacing
- Use span values for easier positioning
- Click cells to edit their properties
संबंधित टूल्स
ग्रिड लेआउट डिज़ाइनर के बारे में
यह कैसे काम करता है
- ग्रिड के आयाम और स्पेसिंग कॉन्फिगर करें
- विज़ुअल डिज़ाइनर में सेल जोड़ें और पोजीशन करें
- सेल की सामग्री, क्लास नाम और बैकग्राउंड कलर संपादित करें
- जल्दी शुरू करने के लिए प्रीसेट टेम्पलेट का उपयोग करें
- जेनरेटेड CSS और HTML कोड कॉपी या डाउनलोड करें
सामान्य उपयोग के मामले
- वेबसाइट लेआउट डिज़ाइन और प्रोटोटाइपिंग
- CSS Grid की मूल बातें सीखना
- रिस्पॉन्सिव ग्रिड लेआउट बनाना
- डैशबोर्ड और एडमिन पैनल डिज़ाइन
- कार्ड-आधारित लेआउट सिस्टम
अक्सर पूछे जाने वाले प्रश्न
CSS Grid क्या है और यह टूल कैसे मदद करता है?
CSS Grid एक शक्तिशाली लेआउट सिस्टम है जो रो और कॉलम के साथ जटिल, रिस्पॉन्सिव लेआउट बनाने की अनुमति देता है। यह टूल ग्रिड लेआउट डिज़ाइन करने के लिए एक विज़ुअल इंटरफेस प्रदान करता है और फिर आपके लिए CSS और HTML कोड जेनरेट करता है।
अपने एलिमेंट्स के लिए ग्रिड पोजीशन कैसे निर्दिष्ट करें?
ग्रिड पोजीशन "स्टार्ट / एंड" फॉर्मेट का उपयोग करती है जहां नंबर ग्रिड लाइनों को दर्शाते हैं। उदाहरण के लिए, "1 / 3" का मतलब है लाइन 1 से शुरू होकर लाइन 3 पर समाप्त (2 ट्रैक स्पैन करना)।
क्या मैं इस टूल से रिस्पॉन्सिव ग्रिड लेआउट बना सकता हूं?
हां! टूल CSS Grid कोड जेनरेट करता है जो स्वाभाविक रूप से रिस्पॉन्सिव है। आप पूर्ण रिस्पॉन्सिवनेस के लिए कंटेनर की चौड़ाई "100%" सेट कर सकते हैं। अधिक जटिल रिस्पॉन्सिव व्यवहार के लिए, आप जेनरेटेड कोड को CSS मीडिया क्वेरी के साथ जोड़ सकते हैं।
प्रीसेट लेआउट क्या हैं और मैं उनका उपयोग कैसे करूं?
प्रीसेट लेआउट सामान्य ग्रिड पैटर्न हैं जैसे Header+Content+Sidebar, Dashboard Grid, और Card Layout जो आपके डिज़ाइन के लिए शुरुआती बिंदु प्रदान करते हैं। कोई भी प्रीसेट लागू करने के लिए क्लिक करें और फिर कस्टमाइज़ करें।
ग्रिड आइटम कैसे जोड़ें, संपादित करें या हटाएं?
नए ग्रिड आइटम बनाने के लिए "सेल जोड़ें" पर क्लिक करें। किसी भी मौजूदा सेल को चुनने और संपादित करने के लिए उस पर क्लिक करें। सेल चुने जाने पर, आप उसकी सामग्री, क्लास नाम, पोजीशन और बैकग्राउंड कलर बदल सकते हैं।
ग्रिड कॉन्फिगरेशन विकल्प क्या नियंत्रित करते हैं?
Columns और Rows आपके ग्रिड में ट्रैक की संख्या सेट करते हैं। Gap आइटम के बीच की स्पेसिंग नियंत्रित करता है। Width और Height कंटेनर के समग्र आयाम सेट करते हैं।
क्या मैं अपनी वेबसाइट में उपयोग के लिए ग्रिड लेआउट एक्सपोर्ट कर सकता हूं?
बिल्कुल! टूल CSS और HTML कोड जेनरेट करता है जिसे आप कॉपी या डाउनलोड कर सकते हैं। CSS में सभी आवश्यक ग्रिड प्रॉपर्टी और आइटम पोजीशनिंग शामिल है। बस कोड कॉपी करें और अपने प्रोजेक्ट में पेस्ट करें।
विज़ुअल ग्रिड डिज़ाइनर को कैसे समझें?
विज़ुअल डिज़ाइनर आपके ग्रिड लेआउट का लाइव प्रीव्यू दिखाता है। ग्रिड लाइनें ट्रैक को परिभाषित करती हैं, और रंगीन आयत grid-column और grid-row मानों के अनुसार आपके ग्रिड आइटम का प्रतिनिधित्व करते हैं।
fr यूनिट क्या हैं और कब उपयोग करें?
fr (fractional) यूनिट CSS Grid में उपलब्ध स्पेस को समानुपातिक रूप से वितरित करती हैं। यह टूल डिफ़ॉल्ट रूप से समान आकार के लिए "repeat(n, 1fr)" का उपयोग करता है। आप "1fr 2fr 1fr" जैसे विभिन्न fr मानों का उपयोग करने के लिए जेनरेटेड CSS को संशोधित कर सकते हैं।
क्या मैं पत्रिका-स्टाइल के जटिल लेआउट बना सकता हूं?
हां! पत्रिका-स्टाइल के लेआउट बनाने के लिए ओवरलैपिंग ग्रिड पोजीशन का उपयोग करें। उदाहरण के लिए, एक आइटम को कई कॉलम और रो में स्पैन करने के लिए सेट करें जबकि बचे हुए सेल में छोटे आइटम रखें।
क्या जेनरेटेड CSS कोड सभी ब्राउज़र के साथ कॉम्पेटिबल है?
जेनरेटेड CSS Grid कोड सभी आधुनिक ब्राउज़र (Chrome, Firefox, Safari, Edge) में काम करता है और 2017 से सपोर्टेड है। पुराने ब्राउज़र सपोर्ट के लिए, आपको flexbox या floats का उपयोग करके फॉलबैक लेआउट जोड़ने की आवश्यकता हो सकती है।
CSS Grid के गुणों और तकनीकों के बारे में अधिक कैसे सीखें?
यह टूल प्रयोग के माध्यम से CSS Grid सीखने के लिए बढ़िया है! विभिन्न कॉन्फिगरेशन आज़माएं, जेनरेटेड कोड जांचें, और देखें कि परिवर्तन लेआउट को कैसे प्रभावित करते हैं। Help सेक्शन ग्रिड पोजीशनिंग सिंटैक्स समझाता है।