CSS ग्रिड जनरेटर एक मुफ़्त ऑनलाइन टूल है जो ग्रिड लेआउट को दृश्यात्मक रूप से डिज़ाइन करता है।
CSS Grid जनरेटर कैसे इस्तेमाल करें?
पंक्तियों और कॉलम की संख्या सेट करें।
क्षेत्र मर्ज करने या प्लेसमेंट समायोजित करने के लिए सेल ड्रैग करें।
बनाए गए CSS Grid कोड को कॉपी करें और अपने प्रोजेक्ट में उपयोग करें।
CSS Grid जनरेटर के बारे में अक्सर पूछे जाने वाले सवाल
CSS Grid और Flexbox में क्या अंतर है?
CSS Grid 2D लेआउट (पंक्तियाँ + कॉलम) के लिए है, जबकि Flexbox 1D लेआउट (पंक्ति या कॉलम) के लिए है। Grid जटिल पेज लेआउट के लिए अधिक उपयुक्त है।
fr इकाई क्या है?
fr (fraction) CSS Grid में उपयोग की जाने वाली एक आनुपातिक इकाई है। उदाहरण के लिए, 1fr 2fr जगह को 1:2 अनुपात में बाँटता है। यह रेस्पॉन्सिव लेआउट के लिए बहुत उपयोगी है।
क्या मीडिया क्वेरी के बिना रिस्पॉन्सिव ग्रिड बन सकता है?
हाँ। repeat(auto-fit, minmax(240px, 1fr)) लिखने पर आप सिर्फ़ कॉलम की न्यूनतम चौड़ाई तय करते हैं और बाक़ी हिसाब ब्राउज़र करता है: स्क्रीन चौड़ी होने पर कॉलम बढ़ते हैं और सँकरी होने पर घटते हैं, यानी एक भी ब्रेकपॉइंट लिखे बिना फ़ोन से डेस्कटॉप तक काम चल जाता है। ध्यान रहे कि auto-fill बची जगह में ख़ाली ट्रैक छोड़ता है जबकि auto-fit मौजूदा कॉलम खींचकर उसे भर देता है, इसलिए वस्तुएँ कम हों तो दोनों के नतीजे अलग होते हैं।
एक लंबा शब्द ग्रिड का कॉलम खींच देता है और लेआउट बिगड़ जाता है।
ग्रिड आइटम का न्यूनतम आकार डिफ़ॉल्ट रूप से auto होता है, यानी वे अपनी सामग्री से छोटे होने से इनकार कर देते हैं — एक लंबा URL या न टूटने वाला शब्द पूरे कॉलम को फैला देता है। उस आइटम पर min-width: 0 देने से ग्रिड उसे फिर से सिकोड़ सकता है, और साथ में overflow-wrap: anywhere जोड़ने पर लंबी पंक्ति टूटकर अगली पंक्ति में चली जाती है। ट्रैक को केवल 1fr के बजाय minmax(0, 1fr) से परिभाषित करना कारण को जड़ से हटा देता है, इसीलिए यह इतना प्रचलित है।
CSS Grid जनरेटर को प्रभावी ढंग से कैसे इस्तेमाल करें?
repeat(auto-fit, minmax(240px, 1fr)) से कॉलम अपने-आप बदलते हैं, media query की ज़रूरत नहीं।
स्पेसिंग margin की जगह gap से दें ताकि आख़िरी कॉलम में फ़ालतू जगह न बचे।
जटिल लेआउट में grid-template-areas से हिस्सों को नाम दें — बाद में पढ़ना आसान रहता है।