CSS ग्रिड सिस्टम जनरेटर
अपने ब्रेकपॉइंट, कॉलम, गटर, मार्जिन और अधिकतम चौड़ाई के साथ रेस्पॉन्सिव कॉलम ग्रिड बनाएँ। CSS, यूटिलिटी क्लास या Tailwind कॉन्फ़िग में एक्सपोर्ट करें।
CSS ग्रिड सिस्टम जनरेटर लोड हो रहा है…
आपकी फ़ाइलें कभी आपके डिवाइस से बाहर नहीं जातीं
CSS ग्रिड सिस्टम जनरेटर का इस्तेमाल कैसे करें
- 1
इस पेज पर CSS ग्रिड सिस्टम जनरेटर खोलें। यह सीधे आपके ब्राउज़र में लोड होता है।
- 2
अपनी फ़ाइल, टेक्स्ट या वैल्यू जोड़ें और सेटिंग बदलें।
- 3
नतीजा कॉपी या डाउनलोड करें। कुछ भी अपलोड या स्टोर नहीं होता।
इस टूल के बारे में
ग्रिड सिस्टम हर पेज को एक जैसा आधार देता है: तय संख्या में कॉलम, एक जैसे गटर और कंटेंट की अधिकतम चौड़ाई, जो हर स्क्रीन साइज़ पर ढल जाती है। यह ग्रिड सिस्टम जनरेटर आपको यह ढाँचा एक बार तय करके तैयार कोड एक्सपोर्ट करने देता है, ताकि डिज़ाइनर और डेवलपर एक ही ग्रिड पर काम करें।
ग्रिड कैसे बनाएँ
- कंटेंट की अधिकतम चौड़ाई पिक्सल में सेट करें।
- ब्रेकपॉइंट बदलें: हर स्क्रीन साइज़ के लिए कॉलम की संख्या, उनके बीच का गटर और बाहरी मार्जिन चुनें।
- कॉलम का लाइव प्रीव्यू देखें।
- क्लास एक्सपोर्ट करनी हों तो क्लास प्रीफ़िक्स चुनें।
- कोड सादे CSS, यूटिलिटी क्लास या Tailwind कॉन्फ़िग के रूप में कॉपी करें।
एक आम सेटअप
| स्क्रीन | कॉलम | गटर |
|---|---|---|
| फ़ोन | 4 | 16px |
| टैबलेट | 8 | 24px |
| डेस्कटॉप | 12 | 24 से 32px |
बारह कॉलम लोकप्रिय हैं क्योंकि वे आधे, तिहाई, चौथाई और छठे हिस्से में बराबर बँट जाते हैं।
सुझाव
- अपनी डिज़ाइन फ़ाइल से मिलाएँ: Figma लेआउट ग्रिड वाले ही कॉलम और गटर इस्तेमाल करें।
- लाइन की लंबाई सीमित रखें: लगभग 1200 से 1440px की अधिकतम चौड़ाई बड़ी स्क्रीन पर टेक्स्ट पढ़ने लायक रखती है।
- स्पेसिंग स्केल अपनाएँ: 8, 16, 24 या 32px के गटर और मार्जिन से स्पेसिंग एक जैसी लगती है।
- ब्रेकपॉइंट कंटेंट से तय करें: जहाँ लेआउट बिगड़ने लगे वहाँ ब्रेकपॉइंट जोड़ें, सिर्फ़ डिवाइस साइज़ पर नहीं।
ग्रिड सिस्टम बनाम CSS ग्रिड
ग्रिड सिस्टम एक डिज़ाइन परंपरा है; CSS ग्रिड ब्राउज़र का फ़ीचर है जो इसे लागू कर सकता है। बना हुआ CSS आधुनिक CSS इस्तेमाल करता है, इसलिए किसी फ़्रेमवर्क की ज़रूरत नहीं।
ग्रिड के अंदर एक दिशा वाले लेआउट के लिए फ़्लेक्सबॉक्स जनरेटर इस्तेमाल करें, और टेक्स्ट साइज़ टाइपोग्राफ़ी स्केल जनरेटर से तय करें।
अक्सर पूछे जाने वाले सवाल
ग्रिड में कितने कॉलम होने चाहिए?
डेस्कटॉप पर बारह कॉलम सबसे आम विकल्प है क्योंकि वे आधे, तिहाई और चौथाई में बँट जाते हैं। फ़ोन पर आमतौर पर 4 और टैबलेट पर 8 कॉलम होते हैं।
गटर क्या है?
कॉलम के बीच की जगह। आम तौर पर फ़ोन पर 16px और बड़ी स्क्रीन पर 24 से 32px के गटर होते हैं।
क्या ग्रिड को Tailwind के लिए एक्सपोर्ट कर सकते हैं?
हाँ। Tailwind फ़ॉर्मेट चुनें और अपनी स्क्रीन और स्पेसिंग का कॉन्फ़िग पाएँ।
क्या अपने ब्रेकपॉइंट सेट कर सकते हैं?
हाँ। हर ब्रेकपॉइंट की चौड़ाई, कॉलम, गटर और मार्जिन बदलें।
अधिकतम चौड़ाई कितनी रखें?
ज़्यादातर साइट के लिए लगभग 1200 से 1440 पिक्सल ठीक रहता है, जिससे चौड़ी स्क्रीन पर टेक्स्ट की लाइनें आरामदायक लंबाई की रहती हैं।
क्या कोड को Bootstrap या किसी और फ़्रेमवर्क की ज़रूरत है?
नहीं। बना हुआ CSS और क्लास सादा CSS है जो अपने आप काम करता है।