इस टूल के बारे में
CSS Grid Generator एक मुफ़्त, इन-ब्राउज़र टूल है जो तीन सरल नियंत्रणों — column count, row count, और gap — को एक तैयार, पेस्ट-योग्य CSS grid लेआउट में बदल देता है। मान सेट करें, एक लाइव preview को फिर से बनते देखें, और उत्पन्न rule को कॉपी करें।
Columns और rows 1 से 12 तक पूर्ण संख्याएँ हैं (डिफ़ॉल्ट रूप से 3 और 2), और gap 0 से 40 pixels तक का एक slider है (डिफ़ॉल्ट 10)। दोनों आयाम repeat() और 1fr इकाई के साथ लिखे जाते हैं, इसलिए हर track उपलब्ध स्थान को समान रूप से साझा करता है। Preview हर cell को एक नंबरदार, रंगीन block से भरता है ताकि आप एक नज़र में track संरचना देख सकें, और output एक सादा .grid rule है जो display: grid, grid-template-columns, grid-template-rows, और gap का उपयोग करता है। एक क्लिक इसे आपके clipboard पर कॉपी कर देता है।
सब कुछ पूरी तरह आपके ब्राउज़र में चलता है — कोई अपलोड नहीं, कोई अकाउंट नहीं, कोई ट्रैकिंग नहीं — और पेज लोड होने के बाद यह ऑफ़लाइन काम करता रहता है।