CSS लेआउट जनरेटर

Flexbox या Grid लेआउट का प्रीव्यू देखें.

आपके डिवाइस पर · खाते की ज़रूरत नहीं

CSS लेआउट जनरेटर आपके इनपुट को इसी ब्राउज़र में प्रोसेस करता है. इनपुट और परिणाम एनालिटिक्स में शामिल नहीं होते. हाल में इस्तेमाल किए गए टूल की सूची में टूल के नाम, इस्तेमाल की संख्या और पिछली बार खोलने का समय सहेजा जाता है. सहेजे गए टूल की सूची में सिर्फ़ उनके नाम रहते हैं. ड्राफ़्ट सहेजना वैकल्पिक है और ड्राफ़्ट इसी डिवाइस पर रहता है; सहेजा हुआ टेक्स्ट ड्राफ़्ट के नियंत्रणों से मिटाएँ. URL से टेक्स्ट लोड करना वैकल्पिक है और ऐसा करने पर उस सर्वर से संपर्क होता है; सर्वर को उसका URL और आपका IP पता दिखाई देते हैं. वैकल्पिक “इसमें इस्तेमाल करें” कार्रवाई से अगले टूल को देने वाला डेटा इसी टैब में रहता है. अगला टूल खुलते ही उसे हटा देता है और एक मिनट से अधिक बीतने पर उसे इस्तेमाल नहीं करता.

“लिंक कॉपी करें” में साझा करने के लिए चुने गए इनपुट लिंक के पते में शामिल होते हैं. उस लिंक से कोई भी उन्हें फिर खोल सकता है. फ़ाइलें और बनाए गए परिणाम शामिल नहीं होते. पासवर्ड और कुंजी वाले टूल सिर्फ़ सेटिंग साझा करते हैं.

हिन्दी

आइटम के लेबल, हर लाइन में एक

लेआउट

विकल्प और डिवाइस की फ़ाइल

Grid कॉलम

अंतर (px)

Flex basis (px)

इस डिवाइस की टेक्स्ट फ़ाइल खोलें

वैकल्पिक सेटिंग सिर्फ़ इस टैब पर लागू होती हैं.

आपका नतीजा

HTML सोर्स

और

कीबोर्ड शॉर्टकट

लिंक और रीसेट के बारे में

लिंक में आपके इनपुट और सेटिंग शामिल होते हैं. जिसके पास लिंक होगा, वह इन्हें देख सकता है, इसलिए निजी टेक्स्ट शामिल न करें. फ़ाइलें और तैयार नतीजे शामिल नहीं होते; रैंडम चयन दोबारा होता है.

रीसेट करने पर टूल शुरुआती मानों के साथ दोबारा लोड होता है और खुली फ़ाइलों व डिवाइस के नियंत्रण को छोड़ देता है. सहेजे गए ड्राफ़्ट आपके मिटाने तक इसी डिवाइस पर रहते हैं.

इस टूल को इस्तेमाल करने के लिए JavaScript चालू करें. नीचे हल किया गया उदाहरण बताता है कि कैसा परिणाम मिलेगा.

CSS लेआउट जनरेटर कैसे काम करता है

आइटम के लेबल से रिस्पॉन्सिव Grid या अगली लाइन में जाने वाला Flexbox लेआउट बनाएँ. Grid कॉलम की संख्या, अंतर या flex basis बदलें, फिर प्रीव्यू में इस्तेमाल हुआ वही स्वतंत्र HTML कॉपी या डाउनलोड करें.

अगला: CSS फ़ॉर्मैटर

अगला: CSS स्पेसिफ़िसिटी कैलकुलेटर

अगला: कंट्रास्ट चेकर

उदाहरण

तीन कॉलम वाले Grid में repeat(3, minmax(0, 1fr)) इस्तेमाल होता है, ताकि लंबे लेबल समान चौड़ाई वाले कॉलम में अगली लाइन में जा सकें. Flexbox में आइटम अपने पसंदीदा basis और उपलब्ध जगह के अनुसार अगली लाइन में जाते हैं.

नतीजे का इस्तेमाल करने से पहले

यह लेआउट की शुरुआत करने का टूल है, पूरा वेबसाइट बिल्डर या ब्राउज़र अनुकूलता की जाँच नहीं. प्रीव्यू में तय डेमो स्टाइलिंग है. कम चौड़ाई पर भी Grid में चुनी हुई कॉलम संख्या बनी रहती है; अंतिम डिज़ाइन में अलग संख्या चाहिए तो मीडिया क्वेरी जोड़ें.

अपडेट किया गया 7 अक्टूबर 2026

इस पेज का संदर्भ दें

संदर्भ लिखने की शैली

ToolOctopus. “CSS लेआउट जनरेटर.” अपडेट किया गया 7 अक्टूबर 2026. https://tooloctopus.com/hi/css-लेआउट-जनरेटर.

अगर आपके निर्देशों में ज़रूरी हो, तो पेज देखने की तारीख भी जोड़ें.

संदर्भों का प्रारूप बनाने के लिए Frank Bennett की citeproc-js लाइब्रेरी और Citation Style Language की शैलियों का इस्तेमाल होता है. लाइसेंस और सोर्स कोड.