CSS Grid जेनरेटर

एक CSS grid को विज़ुअल रूप से डिज़ाइन करें — कॉलम, पंक्तियाँ, gaps, और मर्ज किए सेल सेट करें, फिर grid-template CSS कॉपी करें। सब कुछ आपके ब्राउज़र में चलता है।

CSS Grid जेनरेटर पूरी तरह आपके ब्राउज़र में चलता है। आपके द्वारा कॉन्फ़िगर किए कॉलम, पंक्तियाँ, ट्रैक आकार, gaps, और मर्ज किए सेल कभी आपके डिवाइस से बाहर नहीं जाते और कुछ भी ArrayKit पर अपलोड नहीं होता।

CSS Formatter खोलें

CSS Grid जेनरेटर के बारे में

CSS Grid जेनरेटर आपको एक grid लेआउट को देखकर बनाने और उसके द्वारा उत्पन्न सटीक CSS को कॉपी करने देता है। एक कॉलम और पंक्ति गिनती चुनें, हर ट्रैक को fr इकाइयों, पिक्सेल, प्रतिशत, auto, या minmax() के साथ आकार दें, और gap सेट करें। एक लाइव प्रीव्यू grid दिखाता है; दो सेल पर क्लिक करके उन्हें एक फैले क्षेत्र में मर्ज करें और टूल आपके लिए मेल खाते grid-column और grid-row नियम लिखता है। तीन या अधिक समान ट्रैक की श्रृंखलाएँ repeat() में सिमट जाती हैं ताकि आउटपुट साफ़-सुथरा रहे, और आप अपनी स्वयं की क्लास से मेल खाने के लिए चयनकर्ता का नाम बदल सकते हैं। यह उन फ्रंट-एंड डेवलपर्स के लिए बनाया गया है जो कार्ड, डैशबोर्ड, और पेज शेल का लेआउट कर रहे हैं और लाइनें हाथ से गिने बिना सही grid-template CSS चाहते हैं। एडिटर पूरी तरह आपके ब्राउज़र में चलता है, इसलिए आपके द्वारा टाइप की गई कोई भी चीज़ अपलोड नहीं होती।

विशेषताएँ

CSS Grid जेनरेटर का उपयोग कैसे करें

  1. चुनें कि आपके लेआउट को कितने कॉलम और पंक्तियाँ चाहिए
  2. हर ट्रैक को fr, px, %, auto, या minmax() के साथ आकार दें
  3. gap सेट करें, और यदि यह अलग होना चाहिए तो एक column gap
  4. एक फैला क्षेत्र मर्ज करने के लिए प्रीव्यू में दो सेल पर क्लिक करें
  5. जेनरेट किया गया CSS अपनी स्टाइलशीट में कॉपी करें

उदाहरण

इनपुट

columns: 200px 1fr 1fr 1fr
rows: auto
gap: 20
merge: cols 2-4

आउटपुट

.grid {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

.grid > :nth-child(1) {
  grid-column: 2 / span 3;
  grid-row: 1;
}

तीन समान कॉलम repeat(3, 1fr) में सिमट जाते हैं और मर्ज किए सेल तीन ट्रैक फैलाते हैं।

सामान्य त्रुटियाँ और समस्या निवारण

अक्सर पूछे जाने वाले प्रश्न

CSS Grid जेनरेटर क्या आउटपुट करता है?
यह display: grid, grid-template-columns, grid-template-rows, और gap के साथ एक कंटेनर नियम उत्पन्न करता है, साथ ही आपके द्वारा बनाए हर मर्ज किए क्षेत्र के लिए एक grid-column / grid-row नियम। आप पूरे ब्लॉक को अपनी स्टाइलशीट में कॉपी करते हैं।
मेरे ट्रैक repeat() में कब सिमटते हैं?
तीन या अधिक समान आसन्न ट्रैक repeat(n, value) में मुड़ जाते हैं। एक पंक्ति में एक या दो लिखे ही रहते हैं, क्योंकि repeat() केवल तीन ट्रैक से ऊपर आउटपुट को छोटा करता है। मिश्रित अनुक्रम शाब्दिक ट्रैक और repeat() समूहों को इंटरलीव करते हैं।
मैं कई कॉलम या पंक्तियों को फैलाने के लिए सेल कैसे मर्ज करूँ?
प्रीव्यू में एक सेल पर क्लिक करें, फिर एक दूसरे सेल पर क्लिक करें। टूल उनके बीच का आयत चुनता है और सही स्टार्ट लाइन तथा फैलाव के साथ grid-column और grid-row लिखता है। इसे वापस एकल सेल में विभाजित करने के लिए एक मर्ज किए ब्लॉक पर फिर से क्लिक करें।
क्या मैं ट्रैक आकारों के लिए minmax(), auto, और प्रतिशत का उपयोग कर सकता हूँ?
हाँ। हर ट्रैक एक fr मान, एक पिक्सेल लंबाई, एक प्रतिशत, auto, या minmax(min, max) स्वीकार करता है। शुद्ध संख्याओं को fr के रूप में माना जाता है, और minmax() दूरी को सामान्यीकृत किया जाता है ताकि कॉपी किया गया CSS सुसंगत हो।
जेनरेट किया गया नियम एक :nth-child() चयनकर्ता का उपयोग क्यों करता है?
मर्ज किए क्षेत्र स्थिति के अनुसार रखे जाते हैं, इसलिए टूल :nth-child() के साथ स्रोत क्रम में grid चाइल्ड को लक्षित करता है। कंटेनर चयनकर्ता का नाम अपनी क्लास पर बदलें, और प्लेसमेंट नियम स्वतः उसका अनुसरण करते हैं।
क्या मेरे द्वारा डिज़ाइन की गई grid कहीं भेजी जाती है?
नहीं। CSS Grid जेनरेटर टेम्पलेट और प्लेसमेंट CSS को पूरी तरह आपके ब्राउज़र में बनाता है। आपके द्वारा सेट किए कॉलम, पंक्तियाँ, gaps, और मर्ज किए सेल कभी आपके डिवाइस से बाहर नहीं जाते और ArrayKit पर अपलोड नहीं होते।

संबंधित टूल

सभी ArrayKit टूल