CSS Grid जनरेटर

CSS Grid लेआउट दृश्य रूप से बनाएँ और साफ़ CSS व HTML कॉपी करें

पूर्वावलोकन

आउटपुट

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 16px;
}

विकल्प

कॉलम अंतराल16px

पंक्ति अंतराल16px

चुना गया आइटम

कॉलम और पंक्ति फैलाव सेट करने के लिए पूर्वावलोकन में कोई आइटम चुनें।

आइटम क्षैतिज रूप से

आइटम लंबवत रूप से

उन्नत

ट्रैक क्षैतिज रूप से

ट्रैक लंबवत रूप से

न्यूनतम ऊँचाई

0 पर min-height सेट नहीं होता। fr वाली पंक्तियों को भरने के लिए ऊँचाई चाहिए।

संपादन करते समय पूर्वावलोकन और कोड अपडेट होते हैं।

CSS Flexbox जनरेटरFlexbox लेआउट विज़ुअली बनाएँ और CSS, HTML या Tailwind कॉपी करें ग्रेडिएंट जनरेटरचुने हुए CSS ग्रेडिएंट देखें या रेखीय, रेडियल और कोनिक ग्रेडिएंट बनाएँ CSS ब्यूटीफ़ायर & मिनिफ़ायरCSS कोड को फॉर्मेट, ऑप्टिमाइज़ और मिनिफाई करें HTML CSS JS प्लेग्राउंडफ्रंटएंड कोड लिखें, ब्राउज़र में सुरक्षित रूप से चलाएँ और परिणाम डीबग करें।

CSS Grid जनरेटर क्या है?

CSS Grid लेआउट के लिए एक दृश्य बिल्डर। fr, px, %, auto, minmax() या जाँचे गए कस्टम मान से कॉलम और पंक्तियों का आकार सेट करें, नामित क्षेत्र रंगें या auto-fit वाली रिस्पॉन्सिव कार्ड ग्रिड बनाएँ। पूर्वावलोकन एक असली CSS Grid कंटेनर है जो जनरेट किए गए कोड जैसी ही घोषणाओं से चलता है, इसलिए जो दिखता है वही कॉपी होता है।

इस्तेमाल कैसे करें

1.कोई मोड चुनें: ट्रैक, नामित क्षेत्र या रिस्पॉन्सिव, या कोई प्रीसेट लोड करें।
2.कॉलम और पंक्तियों का आकार, अंतराल और संरेखण सेट करें।
3.ट्रैक मोड में, किसी आइटम को कई कॉलम या पंक्तियों में फैलाने के लिए पूर्वावलोकन में उस पर क्लिक करें।
4.नामित क्षेत्र मोड में, नाम लिखें और हर क्षेत्र रंगने के लिए सेल पर क्लिक करें।
5.CSS या स्वतंत्र HTML पेज कॉपी या डाउनलोड करें।

नामित क्षेत्र और जाँच

हर नामित क्षेत्र एक भरा हुआ आयत होना चाहिए, नहीं तो ब्राउज़र पूरी grid-template-areas घोषणा को अनदेखा कर देते हैं। यह टूल बताता है कि कौन सा क्षेत्र नियम तोड़ रहा है और ठीक होने तक पूर्वावलोकन और कोड में आख़िरी मान्य लेआउट रखता है। कस्टम ट्रैक आकार लागू करने से पहले जाँचे जाते हैं।

सीमाएँ

अधिकतम 12 कॉलम, 12 पंक्तियाँ और 48 आइटम। कस्टम आकार में लंबाई, प्रतिशत, fr, auto, min-content, max-content, minmax() और fit-content() स्वीकार हैं; calc(), var(), लाइन नाम और एक ट्रैक के अंदर repeat() स्वीकार नहीं हैं। लेआउट केवल इसी ब्राउज़र में सहेजे जाते हैं।

CSS Grid जनरेटर

लेआउट

कॉलम के आकार

पंक्तियों के आकार

पूर्वावलोकन

आउटपुट

विकल्प

चुना गया आइटम

CSS Grid जनरेटर

लेआउट

कॉलम के आकार

पंक्तियों के आकार

पूर्वावलोकन

आउटपुट

विकल्प

चुना गया आइटम

संबंधित टूल्स