CSS Grid जेनरेटर का परिचय
CSS Grid जेनरेटर एक विज़ुअल टूल है जो आपको ग्रिड लेआउट को आसानी से डिज़ाइन करने की सुविधा देता है। इस टूल की मदद से आप कॉलम और रो की संख्या तय कर सकते हैं, उनके साइज़ को नियंत्रित कर सकते हैं, और ग्रिड के बीच की दूरी (गैप) को परिभाषित कर सकते हैं। ग्रिड के सेल पर ड्रैग करके आप सीधे आइटम रख सकते हैं, जिसके बाद यह टूल आपके डिज़ाइन के अनुसार CSS और HTML कोड तैयार कर देता है जिसे आप अपने प्रोजेक्ट में कॉपी और पेस्ट कर सकते हैं।
यह टूल उन लोगों के लिए उपयोगी है जो:
- किसी CSS ग्रिड लेआउट का तुरंत प्रोटोटाइप बनाना चाहते हैं।
- बिना मैन्युअल कोड लिखे ग्रिड लेआउट के लिए CSS और HTML जनरेट करना चाहते हैं।
- यह देखना चाहते हैं कि अलग-अलग कॉलम और रो साइज़ ग्रिड लेआउट को कैसे प्रभावित करते हैं।
- साइडबार, हेडर/फ़ुटर, गैलरी, या डैशबोर्ड जैसी संरचनाओं के साथ लेआउट बनाना चाहते हैं।
इनपुट और नियंत्रण विकल्प
ग्रिड को अपनी आवश्यकतानुसार ढालने के लिए टूल में निम्नलिखित इनपुट विकल्प दिए गए हैं:
- कॉलम: आप ग्रिड में 1 से लेकर 12 तक कॉलम की संख्या सेट कर सकते हैं।
- रो (Rows): ग्रिड में रो की संख्या भी 1 से लेकर 12 तक चुनी जा सकती है।
- कॉलम गैप: कॉलम के बीच की दूरी को 0 से 48px के बीच सेट किया जा सकता है।
- रो गैप (Row gap): रो के बीच की दूरी को भी 0 से 48px के बीच सेट किया जा सकता है।
- कॉलम साइज़: प्रत्येक कॉलम के लिए आप कोई भी वैध CSS ग्रिड वैल्यू लिख सकते हैं, जैसे
1fr,200px,auto,min-content, याminmax(120px, 1fr)। - रो साइज़: कॉलम की ही तरह प्रत्येक रो के लिए भी वैध CSS ग्रिड वैल्यू जैसे
1fr,200px,auto,min-content, याminmax(120px, 1fr)का उपयोग किया जा सकता है। - आइटम प्लेसमेंट (Item placement): ग्रिड के सेल पर माउस या पॉइंटर को ड्रैग करके एक आयताकार क्षेत्र को चिह्नित किया जाता है।
ग्रिड के नियम और कार्यप्रणाली
CSS Grid जेनरेटर कुछ विशिष्ट नियमों के आधार पर कोड तैयार करता है:
- आइटम बनाना: जब आप ग्रिड के सेल पर ड्रैग करने के बाद माउस छोड़ते हैं, तो चुने गए कॉलम और रो के दायरे में एक चाइल्ड आइटम बन जाता है।
- कोड जनरेशन: आपके द्वारा बनाए गए प्रत्येक आइटम के लिए CSS में
grid-columnऔरgrid-rowनियम तैयार होते हैं और HTML में उनके संगत एकdivएलिमेंट बन जाता है। - ओवरलैपिंग: ग्रिड पर बनाए गए आइटम एक-दूसरे के ऊपर आ सकते हैं (ओवरलैप कर सकते हैं)। ऐसी स्थिति में जो आइटम बाद में बनाया जाता है, वह पहले वाले आइटम के ऊपर दिखाई देता है।
- आइटम हटाना: किसी भी आइटम को हटाने के लिए उस पर दिए गए "×" बटन पर क्लिक किया जा सकता है।
- अधिकतम सीमा: यह टूल अधिकतम 16 आइटम का समर्थन करता है।
- त्रुटि प्रबंधन (Error Handling): यदि आप किसी ट्रैक साइज़ के लिए
not-a-grid-trackजैसी अमान्य वैल्यू दर्ज करते हैं, तो इनपुट फ़ील्ड को अमान्य चिह्नित कर दिया जाता है, लेकिन आउटपुट CSS में अंतिम वैध वैल्यू ही बनी रहती है। - शॉर्टहैंड कोड:
- यदि एक से अधिक ट्रैक (कॉलम या रो) का साइज़ समान है, तो आउटपुट CSS कोड को संक्षिप्त रखने के लिए उन्हें
repeat()फ़ंक्शन में समेट दिया जाता है। - कॉलम गैप और रो गैप को स्वतंत्र रूप से सेट किया जा सकता है, लेकिन यदि दोनों की वैल्यू समान होती है, तो वे CSS में मिलकर एक सिंगल
gapप्रॉपर्टी बन जाते हैं।
- यदि एक से अधिक ट्रैक (कॉलम या रो) का साइज़ समान है, तो आउटपुट CSS कोड को संक्षिप्त रखने के लिए उन्हें
प्रीसेट लेआउट का उपयोग
त्वरित शुरुआत के लिए टूल में कुछ सामान्य लेआउट पैटर्न के प्रीसेट दिए गए हैं:
- साइडबार: मुख्य कंटेंट एरिया के साथ एक साइड कॉलम वाला लेआउट।
- हेडर और फ़ुटर: ऊपर हेडर, बीच में कंटेंट और नीचे फ़ुटर की संरचना वाला लेआउट।
- गैलरी: यह प्रीसेट विशेष रूप से 3 कॉलम, 2 रो और 3 आइटम जनरेट करता है।
- डैशबोर्ड: जटिल ग्रिड संरचनाओं के लिए एक व्यवस्थित ग्रिड लेआउट।
टूल में दिए गए "आइटम जोड़ें" बटन से नया HTML आइटम जनरेट किया जा सकता है, जबकि "सब आइटम हटाएँ" पर क्लिक करने से HTML कंटेनर पूरी तरह खाली हो जाता है और आइटम की संख्या 0 हो जाती है।
डेटा प्रोसेसिंग और गोपनीयता
इस टूल का उपयोग करते समय आपकी गोपनीयता पूरी तरह सुरक्षित रहती है। आपका ग्रिड सीधे आपके ब्राउज़र में ही बनता है। यहाँ आप जो भी वैल्यू या लेआउट सेट करते हैं, वह BroBroGo पर अपलोड नहीं होता है। सारा प्रोसेसिंग कार्य स्थानीय स्तर पर आपके डिवाइस पर ही निष्पादित होता है।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
ग्रिड पर आइटम कैसे रखें?
सेल पर दबाकर ड्रैग करें और एक आयत घेरें — छोड़ते ही वह उन कॉलम और रो में फैला हुआ एक चाइल्ड बन जाता है। आपका बनाया हर आइटम CSS में अपना grid-column और grid-row नियम पाता है और HTML में एक div से जुड़ता है। आइटम एक-दूसरे पर ओवरलैप कर सकते हैं, बाद वाला ऊपर रहता है; आइटम के × पर क्लिक करके उसे हटाएँ।
क्या कॉलम और रो अलग-अलग साइज़ के हो सकते हैं?
हाँ। हर track का अपना साइज़ बॉक्स होता है, जिसमें आप कोई भी grid वैल्यू भर सकते हैं — 1fr, 200px, auto, min-content या minmax(120px, 1fr)। एक जैसे साइज़ वाले track आउटपुट में repeat() में सिमट जाते हैं ताकि कोड छोटा रहे। कॉलम gap और रो gap अलग-अलग सेट होते हैं और दोनों बराबर होने पर एक ही gap में मिल जाते हैं।
बना हुआ कोड कहाँ इस्तेमाल करें?
CSS और HTML दोनों साथ में कॉपी करें। HTML आपको एक कंटेनर देता है जिसमें हर आइटम के लिए एक div होता है, और CSS ग्रिड बनाकर हर आइटम को जगह देता है। दोनों को अपने प्रोजेक्ट में पेस्ट करें और वही लेआउट मिलेगा जो आपने यहाँ बनाया।