CSS ग्रिड जनरेटर (Grid)

यह कैसे काम करता है

CSS Grid आपको Flexbox के विपरीत, जो एक समय में केवल एक अक्ष प्रबंधित करता है, एक ही प्रॉपर्टी में दो-आयामी ग्रिड परिभाषित करने की सुविधा देता है। यह टूल grid-template-columns और grid-template-rows को समान आकार के कॉलम और पंक्तियों (1fr) के साथ जनरेट करता है, जो एक क्लिक में इमेज गैलरी या डैशबोर्ड के लिए उपयोगी है।

जनरेट किए गए कोड में '1fr' का क्या मतलब है?

fr इकाई (फ्रैक्शन) उपलब्ध स्थान को कॉलम या पंक्तियों के बीच समान रूप से विभाजित करती है; इसलिए repeat(3, 1fr) तीन समान चौड़ाई वाले कॉलम बनाता है जो कंटेनर की पूरी जगह साझा करते हैं।

क्या अलग-अलग आकार के कॉलम रखना संभव है?

हाँ, यह टूल समान कॉलम के साथ एक सरल प्रारंभिक बिंदु जनरेट करता है; आप बाद में grid-template-columns को मैन्युअल रूप से संपादित करके 200px 1fr 2fr जैसे फिक्स्ड या विविध मान उपयोग कर सकते हैं।

100% स्थानीय प्रोसेसिंग: कोड पूरी तरह से आपके ब्राउज़र में WebAssembly के माध्यम से जनरेट होता है।