CSS Grid जनरेटर

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

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

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