CSS Grid म्हणजे काय?
CSS Grid Layout हे आधुनिक ब्राउझरमध्ये अंगभूत द्वि-आयामी लेआउट प्रणाली आहे. display: grid वापरून ग्रिड कंटेनर परिभाषित करा, नंतर grid-template-columns ने स्तंभ आणि grid-template-rows ने पंक्ती नियंत्रित करा. अंशात्मक एककांचे (fr) उपलब्ध जागा आनुपातिकपणे वाटप करतात. चाइल्ड आयटम grid-column: span N आणि grid-row: span N वापरून अनेक स्तंभ किंवा पंक्ती व्यापू शकतात.
CSS Grid जनरेटर कसा वापरायचा
-
संख्या इनपुट (प्रत्येकी 1–12) वापरून स्तंभ आणि पंक्तींची संख्या सेट करा.
-
आकार नियंत्रित करण्यासाठी grid-template-columns आणि grid-template-rows समायोजित करा (उदा. 1fr 2fr, 200px auto).
-
सेलमधील अंतर सेट करा (उदा. 10px, 1rem).
-
निवडण्यासाठी प्रिव्ह्यूमधील कोणत्याही सेलवर क्लिक करा (नारिंगी होते).
-
सेल स्पॅन पॅनेलमध्ये col-span आणि row-span सेट करा, नंतर लागू करा वर क्लिक करा. स्पॅनिंग सेल हिरवे होतात.
-
आउटपुट स्वरूप बदलण्यासाठी CSS किंवा HTML टॅब क्लिक करा, नंतर क्लिपबोर्डवर कॉपी करा.
-
नवीन 3×3 ग्रिडसह पुन्हा सुरू करण्यासाठी सर्व रीसेट करा वर क्लिक करा.