सीएसएस ग्रिड जेनरेटर

कॉलम, पंक्तियों और अंतराल को दृश्य रूप से परिभाषित करें, फिर अपने लेआउट के लिए सीएसएस ग्रिड टेम्पलेट कोड कॉपी करें।

CSS Grid Generator

Live

Columns3

Rows3

Gap12px

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

कॉलम, पंक्तियों और अंतराल को दृश्य रूप से परिभाषित करें, फिर सीएसएस ग्रिड टेम्पलेट कोड कॉपी करें।
आपके ब्राउज़र में चलता है
उपयोग करने के लिए निःशुल्क

कैसे उपयोग करें

स्तंभ और पंक्ति संख्या निर्धारित करें.
गैप और ट्रैक साइज़ को ट्यून करें।
ग्रिड सीएसएस की प्रतिलिपि बनाएँ।

How this tool works

स्तंभ और पंक्ति संख्या निर्धारित करें.
गैप और ट्रैक साइज़ को ट्यून करें।
ग्रिड सीएसएस की प्रतिलिपि बनाएँ।

Recommended settings

पहले डिफ़ॉल्ट विकल्पों का उपयोग करें, फिर यदि आवश्यक हो तो समायोजित करें

Supported formats

Text / on-page input

File size and limits

पुराने फ़ोन पर बहुत जटिल मल्टी-लेयर पूर्वावलोकन धीमा लग सकता है।

Privacy

रंग और सीएसएस जनरेटर पूरी तरह से आपके ब्राउज़र में चलते हैं। पूर्वावलोकन और रूपांतरण कभी भी आपकी शैलियाँ अपलोड नहीं करते हैं।

Common use cases

जब भी आपको आवश्यकता हो सीएसएस ग्रिड जेनरेटर का उपयोग करें: कॉलम, पंक्तियों और अंतराल को दृश्य रूप से परिभाषित करें, फिर सीएसएस ग्रिड टेम्पलेट कोड कॉपी करें।

Troubleshooting

पेस्ट करने के बाद पूर्वावलोकन अलग दिखता है

अपने पृष्ठ पर प्रतिस्पर्धी सीएसएस की जांच करें (रीसेट, विरासत में मिले रंग)। पहले जेनरेट किए गए नियम को एक अलग स्टाइलशीट में कॉपी करें।

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

क्या यह मेरा सीएसएस अपलोड करता है?

नहीं, जेनरेटर और कन्वर्टर आपके ब्राउज़र में लाइव पूर्वावलोकन के साथ चलते हैं।

क्या मुझे एक खाते की आवश्यकता है?

नहीं, टूल खोलें, नियंत्रणों में बदलाव करें और सीएसएस की प्रतिलिपि बनाएँ।