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 ग्रिड से शुरू करने के लिए सब रीसेट करें पर क्लिक करें।