CSS Grid जनरेटर

तुमचे कॉलम्स आणि रोझ सेट करा, आयटम ठेवण्यासाठी सेल्सवर ड्रॅग करा आणि एका क्लिकमध्ये जुळणाऱ्या HTML सह ग्रिड CSS कॉपी करा.

कॉलम्स3रोझ (Rows)3कॉलममधील गॅप12pxरोमधील गॅप12px

आयटम ठेवण्यासाठी ग्रिडवर ड्रॅग करा.

तुमचा ग्रिड थेट तुमच्या ब्राउझरमध्ये तयार केला जातो. तुम्ही येथे सेट केलेले काहीही BroBroGo वर अपलोड केले जात नाही.

नेहमी विचारले जाणारे प्रश्न

मी ग्रिडवर आयटम कसे ठेवू?

एक आयत तयार करण्यासाठी सेल्सवर दाबा आणि ड्रॅग करा — जेव्हा तुम्ही सोडाल तेव्हा तो त्या कॉलम्स आणि रोझमध्ये पसरलेला एक प्लेस्ड चाइल्ड बनेल. तुम्ही काढलेल्या प्रत्येक आयटमला CSS मध्ये स्वतःचा grid-column आणि grid-row नियम आणि HTML मध्ये जुळणारा div मिळतो. आयटम एकमेकांवर येऊ शकतात (overlap), आणि नंतर काढलेला आयटम वरच्या बाजूला बसतो; आयटम काढण्यासाठी त्यावरील × वापरा.

कॉलम्स आणि रोझ वेगवेगळ्या आकारांचे असू शकतात का?

होय. प्रत्येक ट्रॅकचा स्वतःचा आकाराचा बॉक्स असतो आणि तुम्ही तिथे कोणतेही ग्रिड मूल्य टाइप करू शकता — 1fr, 200px, auto, min-content किंवा minmax(120px, 1fr). समान आकाराचे ट्रॅक repeat() मध्ये एकत्र केले जातात जेणेकरून आउटपुट लहान राहील. कॉलम गॅप आणि रो गॅप स्वतंत्रपणे सेट केले जातात, आणि ते समान असल्यास एकाच गॅपमध्ये एकत्र होतात.

मी जनरेट केलेल्या कोडचे काय करू?

CSS आणि HTML शेजारी शेजारी कॉपी करा. HTML तुम्हाला प्रति आयटम एक div असलेला कंटेनर देते, आणि CSS ग्रिड परिभाषित करते आणि प्रत्येक आयटमची जागा निश्चित करते. दोन्ही तुमच्या प्रोजेक्टमध्ये पेस्ट करा आणि तुम्हाला तुम्ही येथे काढलेले तसेच लेआउट मिळेल.

BroBroGo संपादकीय टीमने लिहिले आणि तपासले आहे.शेवटचे अपडेट: 2026-08-01

CSS Grid जनरेटरचा परिचय आणि कार्यपद्धती

CSS Grid जनरेटर हे एक उपयुक्त साधन आहे जे तुम्हाला व्हिज्युअली CSS ग्रिड लेआउट डिझाइन करण्याची सुविधा देते. या साधनामध्ये तुम्ही कॉलम्स आणि रोझ (Rows) ची संख्या निश्चित करू शकता, त्यांचे आकार ठरवू शकता आणि त्यांच्यामधील गॅप्स देखील सेट करू शकता. यानंतर, लेआउटमध्ये आयटम ठेवण्यासाठी तुम्ही ग्रिडवर ड्रॅग करू शकता. हे साधन तुमच्या डिझाइननुसार संबंधित CSS आणि HTML कोड स्वयंचलितपणे जनरेट करते, जो तुम्ही कॉपी करून तुमच्या स्वतःच्या प्रोजेक्टमध्ये वापरू शकता.

हे साधन अशा लोकांसाठी अत्यंत उपयुक्त आहे ज्यांना:

CSS ग्रिड लेआउटचे जलद प्रोटोटाइप तयार करायचे आहे.
मॅन्युअली कोड न लिहिता ग्रिड लेआउटसाठी CSS आणि HTML जनरेट करायचे आहे.
वेगवेगळ्या कॉलम आणि रोच्या आकारांमुळे ग्रिड लेआउटवर काय परिणाम होतो हे व्हिज्युअली पाहायचे आहे.
साइडबार, हेडर/फुटर, गॅलरी किंवा डॅशबोर्ड रचना असलेले लेआउट तयार करायचे आहे.

इनपुट आणि मर्यादा

या जनरेटरचा वापर करताना तुम्ही खालील इनपुट मूल्ये सेट करू शकता:

कॉलम्स: १ ते १२ मधील कोणतीही संख्या.
रोझ (Rows): १ ते १२ मधील कोणतीही संख्या.
कॉलममधील गॅप: ० ते 48px मधील मूल्य.
रोमधील गॅप (Row gap): ० ते 48px मधील मूल्य.
कॉलमचे आकार: कोणतेही वैध CSS ग्रिड मूल्य, जसे की 1fr, 200px, auto, min-content, किंवा minmax(120px, 1fr).
रोचे आकार: कोणतेही वैध CSS ग्रिड मूल्य, जसे की 1fr, 200px, auto, min-content, किंवा minmax(120px, 1fr).
आयटम प्लेसमेंट (Item placement): सेल्सवर ड्रॅग करून एक आयताकृती क्षेत्र निश्चित करणे.

या साधनामध्ये कमाल १६ आयटम्स ठेवण्याची मर्यादा आहे.

ग्रिड लेआउटचे नियम आणि वर्तन

ग्रिडवर काम करताना खालील नियम लागू होतात:

जेव्हा तुम्ही सेल्सवर दाबा आणि ड्रॅग करता, तेव्हा माउस सोडल्यावर निवडलेल्या कॉलम्स आणि रोझमध्ये पसरलेला एक प्लेस्ड चाइल्ड आयटम तयार होतो.
तुम्ही काढलेल्या प्रत्येक आयटमला CSS मध्ये स्वतःचा grid-column आणि grid-row नियम मिळतो आणि HTML मध्ये जुळणारा div मिळतो.
आयटम एकमेकांवर येऊ शकतात (overlap); अशा वेळी नंतर काढलेला आयटम वरच्या बाजूला बसतो.
आयटमवरील "×" चिन्हावर क्लिक करून तुम्ही तो आयटम काढू शकता.
प्रत्येक ट्रॅकचा (कॉलम किंवा रो) स्वतःचा आकाराचा बॉक्स असतो, जिथे तुम्ही कोणतेही ग्रिड मूल्य टाइप करू शकता.
जर तुम्ही ट्रॅकच्या आकारासाठी not-a-grid-track सारखे अवैध मूल्य प्रविष्ट केले, तर तो इनपुट फील्ड अवैध म्हणून चिन्हांकित केला जातो, परंतु आउटपुट CSS मध्ये शेवटचे वैध मूल्य राखले जाते.
"सर्व आयटम काढा" वर क्लिक केल्यास HTML कंटेनर रिकामा होतो आणि आयटम्सची संख्या ० होते.
"आयटम जोडा" मुळे एक HTML आयटम जनरेट होतो.

कोड आउटपुट आणि ऑप्टिमायझेशन

CSS Grid जनरेटर तुम्हाला दोन प्रकारचे आउटपुट देतो: १. CSS: ग्रिड कंटेनर आणि प्रत्येक ठेवलेल्या आयटमसाठी जनरेट केलेला CSS कोड. २. HTML: ग्रिड कंटेनर आणि प्रत्येक ठेवलेल्या आयटमसाठी div एलिमेंट्स असलेला HTML कोड.

हा कोड अधिक सुटसुटीत आणि लहान ठेवण्यासाठी साधन काही विशिष्ट नियम वापरते:

repeat() चा वापर: जे ट्रॅक (कॉलम किंवा रो) समान आकाराचे असतात, त्यांना आउटपुट CSS मध्ये repeat() चा वापर करून एकत्र केले जाते.
गॅपचे एकत्रीकरण: कॉलममधील गॅप आणि रोमधील गॅप स्वतंत्रपणे सेट केले जातात, परंतु जेव्हा हे दोन्ही गॅप समान असतात, तेव्हा आउटपुट CSS मध्ये ते एकत्र होऊन एकच gap प्रॉपर्टी तयार होते.

लेआउट प्रीसेट्स

जलद डिझाइनिंगसाठी या साधनामध्ये काही पूर्व-निर्धारित लेआउट्स म्हणजेच प्रीसेट्स दिले आहेत:

साइडबार (Sidebar)
हेडर आणि फुटर
गॅलरी (Gallery): हे प्रीसेट निवडल्यास ३ कॉलम्स, २ रोझ आणि ३ आयटम्स स्वयंचलितपणे जनरेट होतात.
डॅशबोर्ड (Dashboard)

गोपनीयता आणि डेटा प्रक्रिया

तुमची गोपनीयता आमच्यासाठी महत्त्वाची आहे. तुमचा ग्रिड थेट तुमच्या ब्राउझरमध्ये तयार केला जातो. तुम्ही या साधनामध्ये सेट केलेले किंवा डिझाइन केलेले काहीही BroBroGo वर अपलोड केले जात नाही.

वारंवार विचारले जाणारे प्रश्न (FAQ)

मी ग्रिडवर आयटम कसे ठेवू? एक आयत तयार करण्यासाठी सेल्सवर दाबा आणि ड्रॅग करा — जेव्हा तुम्ही सोडाल तेव्हा तो त्या कॉलम्स आणि रोझमध्ये पसरलेला एक प्लेस्ड चाइल्ड बनेल. तुम्ही काढलेल्या प्रत्येक आयटमला CSS मध्ये स्वतःचा grid-column आणि grid-row नियम आणि HTML मध्ये जुळणारा div मिळतो. आयटम एकमेकांवर येऊ शकतात (overlap), आणि नंतर काढलेला आयटम वरच्या बाजूला बसतो; आयटम काढण्यासाठी त्यावरील × वापरा.

कॉलम्स आणि रोझ वेगवेगळ्या आकारांचे असू शकतात का? होय. प्रत्येक ट्रॅकचा स्वतःचा आकाराचा बॉक्स असतो आणि तुम्ही तिथे कोणतेही ग्रिड मूल्य टाइप करू शकता — 1fr, 200px, auto, min-content किंवा minmax(120px, 1fr). समान आकाराचे ट्रॅक repeat() मध्ये एकत्र केले जातात जेणेकरून आउटपुट लहान राहील. कॉलम गॅप आणि रो गॅप स्वतंत्रपणे सेट केले जातात, आणि ते समान असल्यास एकाच gap मध्ये एकत्र होतात.

मी जनरेट केलेल्या कोडचे काय करू? CSS आणि HTML शेजारी शेजारी कॉपी करा. HTML तुम्हाला प्रति आयटम एक div असलेला कंटेनर देते, आणि CSS ग्रिड परिभाषित करते आणि प्रत्येक आयटमची जागा निश्चित करते. दोन्ही तुमच्या प्रोजेक्टमध्ये पेस्ट करा आणि तुम्हाला तुम्ही येथे काढलेले तसेच लेआउट मिळेल.