CSS Grid जेनरेटर
अपने कॉलम और रो सेट करें, सेल पर ड्रैग करके आइटम रखें, और grid CSS को उसके HTML के साथ एक क्लिक में कॉपी करें।
आपका ग्रिड आपके ब्राउज़र में ही बनता है। यहाँ जो भी सेट करते हैं वह BroBroGo पर अपलोड नहीं होता।
अक्सर पूछे जाने वाले सवाल
ग्रिड पर आइटम कैसे रखें?
सेल पर दबाकर ड्रैग करें और एक आयत (rectangle) घेरें — छोड़ते ही वह उन कॉलम और रो में फैला हुआ एक चाइल्ड बन जाता है। आपका बनाया हर आइटम CSS में अपना grid-column और grid-row नियम पाता है और HTML में एक div से जुड़ता है। आइटम एक-दूसरे पर ओवरलैप कर सकते हैं, बाद वाला ऊपर रहता है; आइटम के × पर क्लिक करके उसे हटाएँ।
क्या कॉलम और रो अलग-अलग साइज़ के हो सकते हैं?
हाँ। हर track का अपना साइज़ बॉक्स होता है, जिसमें आप कोई भी grid वैल्यू भर सकते हैं — 1fr, 200px, auto, min-content या minmax(120px, 1fr)। एक जैसे साइज़ वाले track आउटपुट में repeat() में सिमट जाते हैं ताकि कोड छोटा रहे। कॉलम gap और रो gap अलग-अलग सेट होते हैं और दोनों बराबर होने पर एक ही gap में मिल जाते हैं।
बना हुआ कोड कहाँ इस्तेमाल करें?
CSS और HTML दोनों साथ में कॉपी करें। HTML आपको एक कंटेनर देता है जिसमें हर आइटम के लिए एक div होता है, और CSS ग्रिड बनाकर हर आइटम को जगह देता है। दोनों को अपने प्रोजेक्ट में पेस्ट करें और वही लेआउट मिलेगा जो आपने यहाँ बनाया।