CSS Grid जनरेटर
नामित क्षेत्रों, प्रीसेट और CSS, Tailwind व HTML के लिए लाइव कोड आउटपुट के साथ CSS Grid लेआउट दृश्य रूप से डिज़ाइन करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
अपडेट किया गया
CSS Grid Generator
Visually design CSS Grid layouts with named areas, presets, and live code output for CSS, Tailwind, and HTML.
Presets
Container
Preview
Click and drag across cells to create a named area.
Generated Code
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 8px 8px;
justify-items: stretch;
align-items: stretch;
justify-content: start;
align-content: start;
}
.grid-item {
/* place items manually with grid-column / grid-row */
}अक्सर पूछे जाने वाले प्रश्न
CSS Grid Generator क्या है?
CSS Grid Generator एक मुफ़्त ऑनलाइन टूल है जिससे आप नामित क्षेत्रों, प्रीसेट और CSS, Tailwind व HTML के लिए लाइव कोड आउटपुट के साथ CSS grid लेआउट को दृश्य रूप से डिज़ाइन कर सकते हैं। यह पूरी तरह आपके ब्राउज़र में चलता है, बिना किसी इंस्टॉलेशन या साइन-अप के।
मैं नामित grid क्षेत्र कैसे बनाऊँ?
दृश्य प्रीव्यू में कोशिकाओं पर क्लिक करके खींचें। पहले क्षेत्र का नाम दें (या स्वतः-नाम के लिए खाली छोड़ दें)। CSS आउटपुट में grid-template-areas और क्लास सेलेक्टर शामिल होते हैं।
कौन-सी ट्रैक इकाइयाँ समर्थित हैं?
प्रत्येक कॉलम या पंक्ति fr, px, %, auto या minmax(min, max) का उपयोग कर सकती है। minmax रिस्पॉन्सिव ट्रैक के लिए min/max संख्या इनपुट दिखाता है।
क्या Tailwind आउटपुट सटीक है?
जितना संभव हो उतना अच्छा। एकसमान fr ट्रैक grid-cols-N में मैप होते हैं; मिश्रित इकाइयाँ grid-cols-[200px_1fr_200px] जैसे यादृच्छिक मानों पर लौट जाती हैं। CSS आउटपुट ही आधिकारिक स्रोत है।
क्या CSS Grid Generator उपयोग करने के लिए मुफ़्त है?
हाँ, CSS Grid Generator 100% मुफ़्त है — बिना पंजीकरण, बिना छिपे शुल्क और बिना उपयोग सीमा के। पूरी प्रोसेसिंग आपके ब्राउज़र में स्थानीय रूप से होती है, जिससे पूर्ण गोपनीयता सुनिश्चित होती है।
क्या इस टूल के साथ मेरा डेटा सुरक्षित है?
बिल्कुल। CSS Grid Generator सब कुछ आपके ब्राउज़र में क्लाइंट-साइड पर प्रोसेस करता है। कोई भी डेटा किसी सर्वर पर अपलोड या स्टोर नहीं किया जाता। आपकी सामग्री हर समय आपके डिवाइस पर निजी रहती है।
क्या CSS Grid Generator मोबाइल डिवाइस पर काम करता है?
हाँ, CSS Grid Generator पूरी तरह रिस्पॉन्सिव है और स्मार्टफ़ोन व टैबलेट पर काम करता है। आप इसे आधुनिक वेब ब्राउज़र वाले किसी भी डिवाइस पर इस्तेमाल कर सकते हैं — किसी ऐप को डाउनलोड करने की ज़रूरत नहीं।
क्या इस टूल का उपयोग करने के लिए मुझे खाता बनाना होगा?
किसी खाते या पंजीकरण की ज़रूरत नहीं है। बस अपने ब्राउज़र में CSS Grid Generator खोलें और तुरंत इस्तेमाल शुरू करें। कोई साइन-अप रुकावट या उपयोग की सीमा नहीं है।
यह टूल किन प्रोग्रामिंग भाषाओं या फ़ॉर्मैट का समर्थन करता है?
CSS Grid Generator लोकप्रिय फ़ॉर्मैट और भाषाओं की एक विस्तृत श्रृंखला का समर्थन करता है। समर्थित विकल्पों की पूरी सूची के लिए टूल का इंटरफ़ेस देखें।
कौन-से ब्राउज़र समर्थित हैं?
CSS Grid Generator सभी आधुनिक ब्राउज़रों में काम करता है, जिनमें Chrome, Firefox, Safari, Edge और Opera शामिल हैं। सर्वोत्तम अनुभव के लिए अपने पसंदीदा ब्राउज़र के नवीनतम संस्करण का उपयोग करें।
CSS Grid कॉलम में fr, px, और % यूनिट में क्या फ़र्क़ है?
ये तीनों यूनिट यह तय करती हैं कि हर ट्रैक का साइज़ कैसे होगा। fr यूनिट फ़िक्स्ड ट्रैक रखे जाने के बाद बची हुई जगह का एक अंश दर्शाती है, इसलिए 1fr पर सेट दो कॉलम बची हुई चौड़ाई को बराबर बाँट लेते हैं और कंटेनर के आकार बदलने पर भी लचीले बने रहते हैं। px वैल्यू एक स्थिर पिक्सेल चौड़ाई है जो कभी नहीं बदलती, जो साइडबार, रेल, या ऐसे हेडर के लिए आदर्श है जिन्हें अपना साइज़ बनाए रखना ज़रूरी है। % को कंटेनर की अपनी चौड़ाई या ऊँचाई के हिसाब से मापा जाता है, इसलिए 25% वाला कॉलम सामग्री चाहे कुछ भी हो, हमेशा एक चौथाई हिस्सा लेता है। एक आम पैटर्न इन्हें मिलाता है, जैसे 250px का फ़िक्स्ड साइडबार और उसके साथ 1fr का लचीला मेन कॉलम। इस जेनरेटर में हर कॉलम और रो को अपना यूनिट ड्रॉपडाउन मिलता है, इसलिए आप fr, px, %, और auto को मिला सकते हैं और एक्सपेरिमेंट करते हुए लाइव प्रीव्यू और CSS को तुरंत अपडेट होते देख सकते हैं।
CSS Grid में फ़िक्स्ड ट्रैक साइज़ की जगह minmax() का उपयोग कब करना चाहिए?
जब भी किसी ट्रैक को एक स्थिर साइज़ पर रहने के बजाय दो सीमाओं के बीच लचीला होना हो, तब minmax() का उपयोग करें। इसमें एक न्यूनतम और एक अधिकतम वैल्यू होती है, इसलिए minmax(100px, 1fr) किसी कॉलम को 100px से छोटा नहीं होने देता लेकिन जगह होने पर बची हुई जगह भरने के लिए बढ़ने देता है। यह रिस्पॉन्सिव लेआउट की रीढ़ है: एक साइडबार संकरी स्क्रीन पर एक पठनीय न्यूनतम साइज़ बनाए रख सकता है और चौड़ी स्क्रीन पर बिना मीडिया क्वेरी के फैल सकता है। फ़िक्स्ड px तभी बेहतर है जब किसी ट्रैक को कभी हिलना ही नहीं चाहिए, जैसे कोई सटीक आइकन रेल। इस टूल में, किसी ट्रैक के यूनिट ड्रॉपडाउन से minmax चुनने पर समर्पित min और max नंबर इनपुट दिखते हैं, इसलिए आप दोनों सीमाएँ विज़ुअली सेट करते हैं और जनरेट हुआ CSS सही minmax(min, max) वैल्यू लिखता है। किसी कॉलम पर इसे आज़माएँ और देखें कि ब्राउज़र की चौड़ाई खींचने पर प्रीव्यू कैसे फैलता और सीमित होता है।
grid-template-areas और लाइन-आधारित प्लेसमेंट में क्या फ़र्क़ है?
दोनों ही चाइल्ड को ग्रिड में पोज़िशन करते हैं, लेकिन इन्हें पढ़ना बिल्कुल अलग अनुभव है। लाइन-आधारित प्लेसमेंट नंबर वाली ग्रिड लाइनों का उपयोग करता है, इसलिए कोई चाइल्ड grid-column: 1 / 3 और grid-row: 2 / 4 में फैलता है, जो सटीक तो है लेकिन आपको लाइनें गिनने और ट्रैक बदलने पर दोबारा गिनने पर मजबूर करता है। grid-template-areas इसके बजाय आयतों को header, sidebar, और main जैसे इंसानी नाम देता है, फिर एक चाइल्ड को सिर्फ़ grid-area: header से रखा जा सकता है। इससे स्ट्रक्चर एक नज़र में पठनीय हो जाता है और फिर से व्यवस्थित करना कहीं आसान हो जाता है, क्योंकि आप लाइन नंबरों की बजाय नामित मैप को एडिट करते हैं। नामित एरिया टीम के साथियों के लिए मार्कअप को खुद-ब-खुद स्पष्ट भी बनाए रखते हैं। यह जेनरेटर एरिया पर ज़ोर देता है: एक नाम टाइप करें, सेल्स पर ड्रैग करके रीजन पेंट करें, और यह grid-template-areas ब्लॉक के साथ हर एरिया के लिए एक क्लास सेलेक्टर बना देता है, जबकि आप ज़रूरत पड़ने पर रो और कॉलम की स्टार्ट और एंड वैल्यू को संख्यात्मक रूप से भी बारीकी से सेट कर सकते हैं।
CSS Grid में justify-items और justify-content में क्या फ़र्क़ है?
ये सुनने में मिलती-जुलती लगती हैं लेकिन अलग-अलग चीज़ों पर असर डालती हैं। justify-items हर ग्रिड सेल के अंदर की सामग्री को रो (इनलाइन) एक्सिस पर एलाइन करता है, इसलिए इसे center सेट करने पर हर आइटम अपने ही सेल के भीतर केंद्रित हो जाता है जबकि सेल खुद अपनी जगह पर बने रहते हैं। justify-content पूरे ट्रैक सेट को कंटेनर के भीतर एलाइन करता है जब कॉलम पूरी उपलब्ध चौड़ाई नहीं भरते, और यहीं पर space-between, space-around, और space-evenly जैसी डिस्ट्रिब्यूशन वैल्यू काम आती हैं जो कॉलम को अलग-अलग फैलाती हैं। यही जोड़ी ब्लॉक एक्सिस पर align-items बनाम align-content के रूप में भी मौजूद है। संक्षेप में, -items प्रॉपर्टीज़ सेल के अंदर चीज़ों को हिलाती हैं, और -content प्रॉपर्टीज़ कंटेनर के अंदर ट्रैक को हिलाती हैं। यह जेनरेटर सभी चार प्रॉपर्टीज़ को ड्रॉपडाउन के रूप में और अलग-अलग रो व कॉलम gap स्लाइडर के साथ उजागर करता है, ताकि आप हर एक को बदलकर तुरंत देख सकें कि लेआउट कैसे बदलता है, इससे पहले कि आप नतीजे वाला CSS कॉपी करें।
अपने लेआउट के लिए मुझे CSS Grid या Flexbox में से क्या इस्तेमाल करना चाहिए?
जल्दी समझने का नियम है आयाम: Flexbox एक-आयामी है, जो आइटम को एक ही रो या कॉलम के साथ लगाता है, जबकि CSS Grid दो-आयामी है, जो रो और कॉलम दोनों को एक साथ नियंत्रित करता है। Flexbox का उपयोग तब करें जब आपके पास आइटम की एक लाइन हो जिसे एक ही एक्सिस पर रैप या डिस्ट्रिब्यूट होना चाहिए, जैसे कोई नेविगेशन बार, बटन ग्रुप, या टैग। Grid का उपयोग तब करें जब आपको एक असली पेज या कॉम्पोनेंट स्ट्रक्चर चाहिए जहाँ एलिमेंट को दोनों एक्सिस पर एलाइन होना ज़रूरी हो, जैसे हेडर, साइडबार, मेन एरिया, और फुटर वाला कोई डैशबोर्ड। ये आपस में प्रतिद्वंद्वी नहीं हैं और अक्सर एक-दूसरे में नेस्ट होते हैं: एक Grid पूरे पेज का ढाँचा तय करता है, और Flexbox किसी एक सेल के भीतर सामग्री को व्यवस्थित करता है। क्योंकि Grid का सिंटैक्स घना है और इसमें बारीक गलतियाँ होना आसान है, यह जेनरेटर आपको दो-आयामी स्ट्रक्चर विज़ुअली बनाने, नामित एरिया पेंट करने, और साफ़-सुथरा CSS, Tailwind, या HTML सीधे अपने प्रोजेक्ट में कॉपी करने देता है।
संबंधित टूल
मुफ़्त API टेस्टर ऑनलाइन
GET, POST, PUT, DELETE अनुरोधों के साथ REST API का परीक्षण करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त cURL से कोड कन्वर्टर
cURL कमांड को JavaScript, Python, PHP कोड में बदलें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त JSON Schema जनरेटर
अपने JSON डेटा से स्वचालित रूप से JSON Schema बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त HTTP हेडर पार्सर
अनुरोधों और प्रतिक्रियाओं के HTTP हेडर पार्स और विश्लेषण करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
CSS Grid Generator के बारे में
CSS Grid Generator एक मुफ़्त विज़ुअल टूल है जिसकी मदद से आप बिना हाथ से बॉयलरप्लेट कोड लिखे CSS Grid लेआउट बना सकते हैं। आप कॉलम और रो की संख्या तय करते हैं, हर ट्रैक के लिए साइज़िंग यूनिट चुनते हैं, लाइव प्रीव्यू पर सीधे नामित रीजन पेंट करते हैं, और टूल तुरंत उपयोग के लिए तैयार कोड CSS, Tailwind, और HTML में जनरेट कर देता है। यह फ्रंट-एंड डेवलपर्स, कोड लिखने वाले डिज़ाइनरों, और Grid सीखने वाले हर उस व्यक्ति के लिए बनाया गया है जो विज़ुअल लेआउट और उसे बनाने वाले नियमों के बीच का संबंध देखना चाहता है।
सब कुछ आपके ब्राउज़र में ही होता है। कोई साइन-अप नहीं, कोई अपलोड नहीं, और कुछ भी सर्वर पर नहीं भेजा जाता — कोड आपकी स्क्रीन पर किए गए चुनावों से लोकली जनरेट होता है, इसलिए चाहे आप कोई साइड प्रोजेक्ट प्रोटोटाइप कर रहे हों या प्रोडक्शन लेआउट स्केच कर रहे हों, यह वैसे ही काम करता है। आप तीनों में से किसी भी आउटपुट को क्लिपबोर्ड पर कॉपी कर सकते हैं या CSS को grid.css फ़ाइल के रूप में डाउनलोड कर सकते हैं।
ग्रिड कंटेनर डिज़ाइन करना
ग्रिड को उसके पैरेंट एलिमेंट पर परिभाषित किया जाता है, और यह टूल उन प्रॉपर्टीज़ को उजागर करता है जो सबसे ज़्यादा मायने रखती हैं। आप 12 तक कॉलम और 12 तक रो जोड़ सकते हैं, और हर ट्रैक की अपनी यूनिट होती है:
- fr — बची हुई जगह का एक अंश, लचीले कॉलम के लिए सबसे भरोसेमंद यूनिट
- px — साइडबार, हेडर, या रेल के लिए एक स्थिर पिक्सेल साइज़ जिसे हिलना नहीं चाहिए
- % — कंटेनर की चौड़ाई या ऊँचाई का एक प्रतिशत
- auto — अपनी सामग्री के अनुसार साइज़ हो जाता है
- minmax — एक रिस्पॉन्सिव रेंज; इसे चुनने पर min और max इनपुट दिखते हैं ताकि एक ट्रैक दो सीमाओं के बीच बढ़ सके, जैसे
minmax(100px, 1fr)
ट्रैक साइज़िंग के अलावा आप रो और कॉलम का gap स्लाइडर (0 से 64px) से अलग-अलग नियंत्रित कर सकते हैं और सभी चार एलाइनमेंट प्रॉपर्टीज़ — justify-items, align-items, justify-content, और align-content — सेट कर सकते हैं, जिनमें space-between, space-around, और space-evenly जैसे डिस्ट्रिब्यूशन वैल्यू भी शामिल हैं।
नामित ग्रिड एरिया पेंट करना
इस टूल की सबसे खास फ़ीचर है grid-template-areas। प्रीव्यू में एक नाम टाइप करें, फिर सेल्स पर क्लिक करके ड्रैग करें ताकि वह आयत उस नामित रीजन को असाइन हो जाए; नाम खाली छोड़ने पर टूल खुद-ब-खुद लेबल लगा देता है। हर एरिया को एक रंग मिलता है ताकि लेआउट एक नज़र में समझ आ जाए, और आप बाद में रो और कॉलम की स्टार्ट/एंड वैल्यू को संख्यात्मक रूप से भी बारीकी से सेट कर सकते हैं। लेआउट लिखने का यह सबसे पठनीय तरीका है — एक बार एरिया नामित हो जाने के बाद, किसी चाइल्ड को रखना बस grid-area: header जितना आसान हो जाता है, और लाइन नंबर गिने बिना भी स्ट्रक्चर पूरी तरह समझ में आता है।
एक्सपेरिमेंट करना तेज़ बनाने के लिए, पाँच प्रीसेट एक क्लिक में पूरे लेआउट लोड कर देते हैं: Holy Grail (हेडर, साइडबार, मेन, असाइड, फुटर), Card Grid 3col, Dashboard, Magazine, और Gallery। ये अच्छे शुरुआती बिंदु हैं और यह दिखाने के बढ़िया उदाहरण हैं कि असली लेआउट ट्रैक और एरिया पर कैसे मैप होते हैं।
जनरेट हुए कोड को समझना
आउटपुट पैनल में तीन टैब हैं, और यह जानना ज़रूरी है कि हर एक क्या गारंटी देता है। CSS टैब सबसे प्रामाणिक स्रोत है: यह display: grid के साथ आपके पूरे grid-template-columns, grid-template-rows, एरिया परिभाषित होने पर grid-template-areas ब्लॉक, gap, एलाइनमेंट, और हर नामित एरिया के लिए एक क्लास सेलेक्टर लिखता है। HTML टैब मिलती-जुलती मार्कअप बना देता है — हर एरिया के लिए एक <div>, या अगर कोई एरिया नहीं है तो हर सेल के लिए एक — ताकि आप एक काम करने लायक ढाँचा सीधे पेज में डाल सकें।
Tailwind टैब जानबूझकर "best-effort" यानी अनुमानित आधार पर काम करता है। एक जैसे 1fr ट्रैक साफ़-सुथरी यूटिलिटीज़ जैसे grid-cols-3 बन जाते हैं, लेकिन मिश्रित यूनिट होने पर यह grid-cols-[200px_1fr_200px] जैसी आर्बिट्ररी वैल्यू पर वापस चला जाता है। अगर कभी Tailwind और CSS आउटपुट में फ़र्क़ दिखे, तो CSS पर भरोसा करें — यही वह कैनोनिकल वर्शन है जिससे बाकी दोनों निकाले जाते हैं।
यह क्यों मायने रखता है
CSS Grid दो-आयामी वेब लेआउट का मानक है, जो हर आधुनिक ब्राउज़र में सपोर्टेड है, लेकिन इसका सिंटैक्स घना है और इसमें बारीक गलतियाँ होना आसान है। ग्रिड और उसके कोड को साथ-साथ अपडेट होते देखना फ़ीडबैक लूप को छोटा कर देता है और Grid को वाक़ई सीखने लायक बना देता है। कोई प्रीसेट चुनें या शून्य से शुरू करें, लेआउट को विज़ुअली आकार दें, फिर कोड को अपने प्रोजेक्ट में कॉपी कर लें।