CSS ग्रिड जनरेटर

कैसे उपयोग करें

1. ग्रिड आयाम सेट करें: अपने लेआउट के लिए कॉलम और पंक्तियों की संख्या दर्ज करें।
2. ट्रैक सेट करें: प्रत्येक कॉलम की चौड़ाई और प्रत्येक पंक्ति की ऊँचाई fr इकाइयों, पिक्सेल, प्रतिशत के साथ सेट करें।
3. CSS कॉपी करें: जनरेट किए गए display: grid, grid-template-columns, grid-template-rows और gap गुण आपकी स्टाइलशीट में पेस्ट करने के लिए तैयार हैं।

CSS Grid जनरेटर क्यों इस्तेमाल करें?

CSS Grid CSS का सबसे शक्तिशाली लेआउट सिस्टम है, जटिल द्वि-आयामी लेआउट बनाने में सक्षम।

विशेषताएँ

• दृश्य ग्रिड निर्माता: कॉलम और पंक्ति ट्रैक दृश्य रूप से परिभाषित करने के लिए क्लिक करें।
• fr इकाइयों का समर्थन: उत्तरदायी आनुपातिक कॉलम के लिए लचीली fr इकाइयों का उपयोग करें।
• minmax() शॉर्टहैंड: न्यूनतम/अधिकतम आकार बाधाओं के साथ आसानी से उत्तरदायी कॉलम बनाएँ।
• अंतराल नियंत्रण: column-gap और row-gap स्वतंत्र रूप से सेट करें।
• नामित क्षेत्र: क्षेत्र-पेंटिंग दृश्य इंटरफ़ेस के साथ grid-template-areas परिभाषित करें।

अक्सर पूछे जाने वाले प्रश्न

CSS Grid में «fr» इकाई क्या है?

fr (fraction) इकाई उपलब्ध स्थान को आनुपातिक रूप से वितरित करती है। 1fr 2fr 1fr के साथ 3-कॉलम ग्रिड में, मध्य कॉलम को बाहरी कॉलमों की तुलना में दोगुना स्थान मिलता है। fr इकाइयाँ निश्चित-आकार ट्रैक्स के आवंटन के बाद शेष स्थान साझा करती हैं।

media queries के बिना रिस्पॉन्सिव ग्रिड कैसे बनाएँ?

grid-template-columns के मान के रूप में repeat(auto-fill, minmax(200px, 1fr)) का उपयोग करें। यह न्यूनतम आकार की अनुमति के अनुसार कई कॉलम बनाता है, उपलब्ध स्थान को भरने के लिए विस्तारित होता है। जब कंटेनर की चौड़ाई बदलती है तो तत्व स्वचालित रूप से पुनर्गठित होते हैं।

grid-template और grid-auto में क्या अंतर है?

grid-template-columns/rows उन स्पष्ट ट्रैक्स को परिभाषित करता है जिन्हें आप निर्दिष्ट करते हैं। grid-auto-columns/rows निहित ट्रैक्स के आकार को परिभाषित करता है, जब तत्व स्पष्ट ग्रिड से बाहर निकल जाते हैं तो स्वचालित रूप से बनाए गए कॉलम और पंक्तियाँ।

CSS Grid का संक्षिप्त इतिहास

CSS Grid से पहले, वेब लेआउट तीन कष्टदायक युगों से गुज़रे। तालिका-आधारित लेआउट (1995-2008) ने दृश्य संरचना के लिए <table> तत्व का दुरुपयोग किया, Photoshop कॉम्प्स को HTML ग्रिड में «स्लाइसिंग और डाइसिंग» करते हुए। फ्लोट-आधारित लेआउट (2008-2013) ने तालिकाओं को float प्रॉपर्टी से बदल दिया, जिसके लिए लिपटे हुए चाइल्ड को नियंत्रित करने के लिए Nicolas Gallagher के micro-clearfix (2011) जैसे «clearfix» हैक्स की आवश्यकता थी। Flexbox (CSS Flexible Box Layout Module Level 1, W3C अनुशंसा 2018) ने एक-आयामी लेआउट हल किए, लेकिन सच्चे दो-आयामी ग्रिड के साथ संघर्ष किया। CSS Grid की कहानी Internet Explorer 10 (2012) में Microsoft के -ms-grid कार्यान्वयन से शुरू हुई, एक प्रारंभिक संस्करण जिसने W3C विनिर्देश को सूचित किया। CSS Grid Layout Module Level 1 का पहला W3C सार्वजनिक कार्य प्रारूप अप्रैल 2011 में आया, लेकिन वास्तविक गति Rachel Andrew (उनकी पुस्तक Get Ready for CSS Grid Layout, 2016) और Jen Simmons (Mozilla डेवलपर एडवोकेट, 2016-2018 सम्मेलन सर्किट) के पैरोकारी कार्य से आई। ब्राउज़र दौड़ मार्च 2017 में एक उल्लेखनीय दो-महीने की खिड़की में सुलझ गई: Chrome 57, Firefox 52, Safari 10.1 और Edge 16 सभी ने एक-दूसरे के कुछ हफ्तों के भीतर बिना उपसर्ग के Grid भेजा। W3C ने दिसंबर 2016 में Grid Level 1 को कैंडिडेट रेकमेंडेशन के रूप में चिह्नित किया; अंतिम W3C अनुशंसा अगस्त 2020 में आई। Subgrid (Level 2) Firefox 71 (दिसंबर 2019), Safari 16 (सितंबर 2022) और Chrome 117 (सितंबर 2023) में भेजा गया। अगली सीमा प्रस्तावित Masonry लेआउट है (CSS Working Group 2020 प्रस्ताव, 2021 से Firefox में फ़्लैग-गेटेड)।

एक CSS ग्रिड की संरचना

• ग्रिड कंटेनर। display: grid (या display: inline-grid) किसी भी तत्व को ग्रिड संदर्भ में बदल देता है। उस तत्व के सीधे चाइल्ड «ग्रिड आइटम» बन जाते हैं और ग्रिड लेआउट में भाग लेते हैं। पोते-पोतियाँ प्रभावित नहीं होते जब तक वे भी display: grid सेट न करें।
• grid-template-columns और grid-template-rows। स्पष्ट ट्रैक (कॉलम और पंक्तियाँ) परिभाषित करते हैं। मान निश्चित (px, em, rem), लचीले (fr, CSS Grid विनिर्देश में परिभाषित «अंश» इकाई), सामग्री-आकार (auto, min-content, max-content), या कोई भी संयोजन हो सकते हैं। grid-template-columns: 200px 1fr 1fr एक 200px साइडबार और दो समान लचीले कॉलम बनाता है।
• fr इकाई। अंश इकाई निश्चित-आकार के ट्रैक आवंटित होने के बाद शेष स्थान वितरित करती है। 1fr 2fr 1fr मध्य कॉलम को साइड कॉलम के दोगुना शेष स्थान देता है। fr Grid के लिए अनूठा है (और Flexbox में संबंधित समकक्ष flex-basis: 0 1 fr एक ही बात नहीं है)। यह उस समस्या को हल करता है जिसके साथ «प्रतिशत कॉलम» पैटर्न दशकों तक संघर्ष करता रहा: शेष स्थान का स्वच्छ वितरण।
• repeat() और minmax()। repeat(3, 1fr) कॉम्पैक्ट रूप से तीन समान कॉलम परिभाषित करता है। minmax(200px, 1fr) एक ट्रैक को एक श्रेणी में सीमित करता है। हत्यारा संयोजन grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) एक उत्तरदायी ग्रिड उत्पन्न करता है जो बिना मीडिया क्वेरीज़ के कंटेनर में फिट होने के लिए कॉलम संख्या को स्वचालित रूप से समायोजित करता है। इस एक पंक्ति ने उत्पादन CSS में हज़ारों ब्रेकपॉइंट परिभाषाएँ बदल दीं।
• grid-template-areas। एक दृश्य रूप से सजी हुई स्ट्रिंग सिंटैक्स जो ग्रिड के क्षेत्रों को नाम देती है। चाइल्ड grid-area: header के साथ नामित क्षेत्र में शामिल होते हैं। परिणाम है लेआउट-जैसा-ASCII-कला: CSS पढ़ने वाला कोई भी स्रोत से ग्रिड की कल्पना कर सकता है। «होली ग्रेल» लेआउट (हेडर / साइडबार / मेन / असाइड / फुटर) के लिए विशेष रूप से शक्तिशाली जिसने CSS डिज़ाइनरों को एक दशक तक परास्त किया।
• gap (और column-gap, row-gap)। ट्रैक के बीच की दूरी परिभाषित करता है। gap: 16px सभी पंक्तियों और कॉलमों को समान रूप से दूरी पर रखता है। Grid से पहले, इसके लिए नाज़ुक padding+margin पैटर्न या ध्यानपूर्वक गणना किए गए नकारात्मक मार्जिन की आवश्यकता थी। वही gap प्रॉपर्टी बाद में Flexbox में जोड़ी गई (2022 से सार्वभौमिक रूप से समर्थित) और अब इसे आधुनिक CSS में अंतर-आइटम दूरी को संभालने का विहित तरीका माना जाता है।

वास्तविक दुनिया के Grid पैटर्न

• चित्र गैलरी। repeat(auto-fill, minmax(200px, 1fr)) पैटर्न पोर्टफोलियो साइटों (Behance ग्रिड), फोटो गैलरी (Unsplash-शैली) और उत्पाद संग्रहों के लिए प्रमुख CSS है। मीडिया क्वेरीज़ के बिना कॉलम संख्या का स्वतः-अनुकूलन Grid से पहले व्यावहारिक रूप से असंभव था।
• डैशबोर्ड और एडमिन पैनल। Grafana, Datadog, Stripe Dashboard और अधिकांश आधुनिक एडमिन UI कार्ड, साइडबार और सामग्री क्षेत्रों को स्थापित करने के लिए नामित ग्रिड क्षेत्रों का उपयोग करते हैं। ड्रैग-एंड-ड्रॉप डैशबोर्ड बिल्डर्स (DataDog, Looker, Tableau) उपयोगकर्ता क्रियाओं को grid-template-areas स्ट्रिंग म्यूटेशन में अनुवादित करते हैं।
• पत्रिका-शैली लेआउट। संपादकीय साइटें (The Guardian, NYT, Vox) ओवरलैपिंग तत्वों, कई कॉलमों में फैले बड़े हीरो चित्रों, और मुख्य पाठ कॉलम से बाहर निकलने वाले पुल-कोट्स के साथ असममित लेआउट के लिए Grid का उपयोग करती हैं। Grid का z-अक्ष (स्पष्ट क्षेत्रों के साथ z-index) स्तरीकरण को स्वाभाविक रूप से संभालता है।
• उत्पाद कार्ड ग्रिड। Shopify, Amazon, Etsy स्टोरफ्रंट। पैटर्न इतना सामान्य है कि Tailwind CSS, Bootstrap और Bulma सभी अपने मूल उपयोगिता सेट के हिस्से के रूप में ग्रिड-आधारित कार्ड घटक भेजते हैं। कार्ड पहलू-अनुपात अब आमतौर पर aspect-ratio प्रॉपर्टी (Safari 15, Chrome 88, 2021) से लॉक किया जाता है।
• «होली ग्रेल» लेआउट। हेडर / बायाँ साइडबार / मुख्य सामग्री / दायाँ साइडबार / फुटर। यह 5-क्षेत्र लेआउट 15 वर्षों तक CSS की अनसुलझी समस्या थी। grid-template-areas और 8 पंक्तियों के CSS के साथ, यह 2017 में सरल हो गया। पैटर्न दस्तावेज़ साइटों (Stripe Docs, MDN, Vercel Docs) पर हावी है।
• फ़ॉर्म लेआउट। बाएँ लेबल और दाएँ इनपुट के साथ दो-कॉलम फ़ॉर्म लेआउट, एक पंक्ति में शहर/राज्य/ज़िप वाले पते के फ़ॉर्म, बहु-चरण विज़ार्ड। Grid लेबल और इनपुट को पंक्तियों के बीच स्वच्छ रूप से संरेखित होने देता है यहाँ तक कि जब सामग्री चौड़ाई भिन्न हो। पैटर्न ने पहले के लेबल-चौड़ाई-हैक दृष्टिकोणों को स्वच्छ CSS से बदल दिया।
• मोडल और संवाद स्थापन। पूर्ण-व्यूपोर्ट ओवरले पर display: grid; place-items: center; एक संवाद को एक ही पंक्ति के साथ क्षैतिज और लंबवत रूप से पूरी तरह से केंद्रित करता है, दशकों के position: absolute; top: 50%; transform: translateY(-50%); पैटर्न को बदलता है। place-items मनमानी सामग्री को केंद्रित करने का 2024 का विहित तरीका है।
• मीडिया क्वेरीज़ के बिना उत्तरदायी। repeat(auto-fill, minmax(...)) को gap के साथ संयोजित करने से लेआउट उत्पन्न होते हैं जो बिना किसी मीडिया क्वेरी के कंटेनर चौड़ाई के अनुसार अनुकूलित होते हैं। यह आधुनिक उत्तरदायी डिज़ाइन का आधार है: लेआउट जो व्यूपोर्ट आकार के बजाय कंटेनर आकार के प्रति प्रतिक्रिया देते हैं, Container Queries (अब भी भेज दिए गए, 2023) की प्रत्याशा करते हैं।

मानक और मील के पत्थर

• IE10 -ms-grid (2012)। Microsoft ने पहला Grid-जैसा कार्यान्वयन भेजा, जिसे Microsoft में Phil Cupp द्वारा डिज़ाइन किया गया। सिंटैक्स अंतिम W3C विनिर्देश से भिन्न था लेकिन अवधारणा को सिद्ध किया और बाद के डिज़ाइन निर्णयों को प्रभावित किया।
• CSS Grid Layout Module Level 1, W3C कार्य प्रारूप (अप्रैल 2011)। पहला W3C सार्वजनिक प्रारूप। कई पुनरावृत्तियाँ इसके बाद आईं; सिंटैक्स 2011 और 2017 के अंतिम कार्यान्वयन के बीच महत्वपूर्ण रूप से विकसित हुई।
• Rachel Andrew और Jen Simmons की पैरोकारी (2014-2017)। Andrew की पुस्तक Get Ready for CSS Grid Layout (Smashing Magazine, 2016) और Mozilla डेवलपर एडवोकेट के रूप में Simmons की सम्मेलन वार्ताएँ उस समुदाय ज्ञान आधार को बनाती हैं जिसने ब्राउज़र शिपिंग को व्यवहार्य बनाया। दोनों को विनिर्देश के W3C एडिटर के नोट्स में श्रेय दिया गया है।
• ब्राउज़र दौड़, मार्च 2017। एक उल्लेखनीय दो-महीने की खिड़की के भीतर, Chrome 57 (9 मार्च), Firefox 52 (7 मार्च), Safari 10.1 (27 मार्च) और Edge 16 (अक्टूबर 2017) सभी ने बिना उपसर्ग के Grid भेजा। इस जटिलता वाली सुविधा के लिए सिंक्रनाइज़्ड क्रॉस-ब्राउज़र शिपिंग का यह स्तर लगभग अभूतपूर्व था।
• कैंडिडेट रेकमेंडेशन (दिसंबर 2016)। CSS Grid Level 1 को W3C कैंडिडेट रेकमेंडेशन में पदोन्नत किया गया, जो W3C रेकमेंडेशन से पहले का अंतिम चरण है। CR चरण आमतौर पर वर्षों लेता है; Grid इस चरण में अधिकांश CSS सुविधाओं से तेज़ी से आगे बढ़ा।
• W3C रेकमेंडेशन (अगस्त 2020)। Grid Level 1 को W3C रेकमेंडेशन के रूप में अंतिम रूप दिया गया। यह तकनीकी रूप से विनिर्देश की «लॉन्च» तिथि है, लेकिन हर प्रमुख ब्राउज़र ने तीन साल पहले एक कार्यशील कार्यान्वयन भेज दिया था।
• Subgrid (Level 2, 2019-2023)। Subgrid एक ग्रिड आइटम को अपने पैरेंट की ट्रैक परिभाषाएँ विरासत में लेने देता है, जो «नेस्टेड ग्रिड संरेखण» समस्या को हल करता है। Firefox 71 (दिसंबर 2019), Safari 16 (सितंबर 2022), Chrome 117 (सितंबर 2023)। Chrome का धीमा रोल-आउट कार्यान्वयन की जटिलता को दर्शाता है।
• Masonry लेआउट (प्रस्तावित, 2020-)। CSS Working Group 2020 से सिंटैक्स पर बहस कर रहा है। Firefox ने इसे 2021 में फ़्लैग के पीछे भेजा। आइटमों को कॉलम में पैक करने वाले Pinterest-शैली के बहने वाले लेआउट लक्ष्य उपयोग मामला हैं। Chrome टीम (Apple-नेतृत्व वाली) और Mozilla टीम ने प्रतिस्पर्धी सिंटैक्स प्रस्तावित किए हैं; 2024 तक समाधान लंबित है।

अधिक अक्सर पूछे जाने वाले प्रश्न

मुझे Grid बनाम Flexbox का उपयोग कब करना चाहिए?

समुदाय शॉर्टहैंड: Flexbox एक आयाम के लिए है, Grid दो के लिए। यदि आप बटनों की एक पंक्ति को बिछा रहे हैं या एक ही दिशा में आइटम संरेखित कर रहे हैं, तो Flexbox सरल है। यदि आप पंक्तियों और कॉलमों के साथ संपूर्ण-पृष्ठ लेआउट डिज़ाइन कर रहे हैं जिन्हें संरेखित होना चाहिए, तो Grid सही उपकरण है। कई वास्तविक लेआउट दोनों को मिलाते हैं: पृष्ठ कंकाल के लिए Grid, प्रत्येक ग्रिड क्षेत्र के भीतर घटक-स्तरीय संरेखण के लिए Flexbox। आधुनिक फ्रेमवर्क (Tailwind, Bootstrap 5) इस पैटर्न को अपनाते हैं।

क्या CSS Grid पुराने ब्राउज़रों में काम करता है?

सभी एवरग्रीन ब्राउज़र (Chrome, Firefox, Safari, Edge) मार्च 2017 से Grid का समर्थन करते हैं। Internet Explorer 11 में केवल प्रारंभिक -ms-grid सिंटैक्स है (सबसेट, उपसर्ग वाला, कई सुविधाएँ गायब)। IE11 समर्थन के लिए, Flexbox या फ्लोट लेआउट पर वापस लौटने के लिए @supports क्वेरीज़ का उपयोग करें। 2024 तक, IE11 का वैश्विक उपयोग 0.5% से कम है, इसलिए अधिकांश टीमों ने फ़ॉलबैक छोड़ दिया है। Caniuse.com बिना उपसर्ग वाले Grid के लिए 97%+ वैश्विक समर्थन की रिपोर्ट करता है।

grid-template-areas और grid-area के बीच क्या अंतर है?

grid-template-areas को ग्रिड कंटेनर पर सेट किया जाता है और दृश्य रूप से ग्रिड के नामित क्षेत्रों को मानचित्रित करता है (प्रति पंक्ति एक स्ट्रिंग)। grid-area को ग्रिड आइटम पर सेट किया जाता है ताकि इसे उन नामित क्षेत्रों में से एक को सौंपा जा सके। दोनों एक साथ काम करते हैं: कंटेनर «मानचित्र» घोषित करता है, आइटम घोषित करते हैं «मैं क्षेत्र X हूँ»। आप नामों के बजाय पंक्ति संख्याओं (grid-area: 1 / 1 / 3 / 4) के साथ सीधे grid-area का भी उपयोग कर सकते हैं, जो गतिशील लेआउट के लिए उपयोगी है।

subgrid क्या है और मुझे इसका उपयोग कब करना चाहिए?

Subgrid एक नेस्टेड ग्रिड को अपने पैरेंट ग्रिड की ट्रैक परिभाषाएँ विरासत में लेने देता है बजाय अपनी बनाने के। यह नेस्टेड ग्रिड में आइटम संरेखित करने की समस्या को हल करता है, उदाहरण के लिए, आंतरिक लेआउट वाला एक कार्ड जिसे आसपास के कार्डों के साथ संरेखित होना चाहिए। नेस्टेड ग्रिड पर grid-template-columns: subgrid का उपयोग करें। Firefox 71+ (दिसंबर 2019), Safari 16+ (सितंबर 2022), Chrome 117+ (सितंबर 2023) में उपलब्ध है। असमर्थक ब्राउज़रों में नियमित नेस्टेड ग्रिड पर वापस लौटता है।

Grid अभिगम्यता के साथ कैसे संपर्क करता है?

Grid स्थापन DOM स्रोत क्रम को नहीं बदलता: आइटम आपके द्वारा निर्दिष्ट दृश्य स्थिति में दिखाई देते हैं, लेकिन स्क्रीन रीडर और कीबोर्ड टैब क्रम स्रोत का अनुसरण करते हैं। WCAG 2.1 SC 1.3.2 सार्थक अनुक्रम के लिए आवश्यक है कि शैलियाँ हटाए जाने पर स्रोत क्रम समझ में आए। निहितार्थ: पहले तार्किक पठन क्रम के लिए अपना DOM स्रोत डिज़ाइन करें, फिर आइटमों को दृश्य रूप से रखने के लिए Grid का उपयोग करें। यदि आप grid-column: 3 / 5; grid-row: 2 के साथ आइटमों को नाटकीय रूप से पुनर्क्रमित करते हैं, तो पुष्टि करने के लिए स्क्रीन रीडर के साथ ऑडिट करें कि बोला गया क्रम अभी भी समझ में आता है।