मुफ़्त CSS ग्रिड जनरेटर
CSS ग्रिड को विज़ुअली डिज़ाइन करें — ट्रैक, इकाइयाँ और अंतराल — और जेनरेट किए गए CSS और HTML को कॉपी करें।
CSS ग्रिड को विज़ुअली डिज़ाइन करें: कॉलम और पंक्तियाँ जोड़ें, fr/px/auto/min-content इकाइयों को मिलाएं, अंतराल को समायोजित करें, और लाइव पूर्वावलोकन देखें। प्रोडक्शन-तैयार CSS और मिलान HTML कॉपी करें।
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 16px;
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>🔒 सब कुछ आपके ब्राउज़र में चलता है — कुछ भी अपलोड नहीं किया जाता।
यह कैसे काम करता है
एक CSS ग्रिड विज़ुअली डिज़ाइन करें: 8 कॉलम और 8 पंक्तियों तक जोड़ें, हर ट्रैक को fr, px, auto, या min/max-content पर सेट करें, और row/column gap समायोजित करें। नंबर वाली लाइव प्रीव्यू तुरंत अपडेट होती है और जनरेट किया grid-template CSS प्लस मिलता-जुलता HTML आपके क्लिपबोर्ड से एक क्लिक दूर हैं।
- 1ग्रिड को आकार दें+ और − से कॉलम और पंक्तियाँ जोड़ें/हटाएँ।
- 2ट्रैक सेट करेंहर कॉलम और पंक्ति को अपनी यूनिट मिलती है (1fr, 100px, auto…)।
- 3अंतराल ट्यून करेंअलग row-gap और column-gap स्लाइडर।
- 4कोड कॉपी करेंप्रोडक्शन-रेडी CSS और मिलता-जुलता HTML ढाँचा।
सब कुछ आपके ब्राउज़र में चलता है — कुछ भी अपलोड नहीं होता।
संबंधित टूल
CSS Flexbox जनरेटर
लाइव आइटम पर flex दिशा, wrap, justify और align के साथ प्रयोग करें — और CSS कॉपी करें।
CSS क्लैंप() जेनरेटर
प्रतिक्रियाशील टाइपोग्राफी और रिक्ति के लिए एक द्रव CSS क्लैंप() मान उत्पन्न करें। न्यूनतम/अधिकतम आकार और व्यूपोर्ट रेंज सेट करें, लाइव पूर्वावलोकन देखें, और एक-पंक्ति CSS की प्रतिलिपि बनाएँ।
प्रिंट करने योग्य कागज़ — रूलदार, ग्राफ़, डॉट ग्रिड और संगीत कागज़ (PDF)
अपना कागज़ खुद प्रिंट करें: रूलदार (वाइड या कॉलेज रूल्ड), ग्राफ़, डॉट ग्रिड, आइसोमेट्रिक, लिखावट अभ्यास, संगीत स्टाफ़ या Cornell नोट्स, A4, Letter, A5 या Legal में, कोई भी रेखा रंग, जितने पेज चाहिए उतने। आपके ब्राउज़र में बना साफ़ वेक्टर PDF।