CSS Grid Generator - ड्रैग एंड ड्रॉप CSS ग्रिड जनरेटर

 (cssgridgenerator.io)
18 पॉइंट द्वारा GN⁺ 2024-07-14 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • कस्टम CSS ग्रिड लेआउट को अधिक आसानी से बनाने में मदद करने वाला टूल
    • कॉलम, रो और गैप साइज़ को माउस से आसानी से सेट किया जा सकता है
  • उपयोग करने का तरीका
    • अपनी ज़रूरत के अनुसार कॉलम, रो और गैप सेट करें
    • + चिन्ह वाले चौकोर पर क्लिक करके ग्रिड में नया एलिमेंट जोड़ें
    • नीचे दाएँ कोने में मौजूद हैंडल का उपयोग करके DIV का आकार बदलें
    • मनचाही जगह पर ड्रैग-एंड-ड्रॉप करके DIV को पुनर्व्यवस्थित करें
    • अंत में जनरेट किया गया HTML और CSS कोड कॉपी करके अपने प्रोजेक्ट में पेस्ट करें
  • Tailwind Grid Generator बनाकर सकारात्मक फ़ीडबैक मिला, और उसी के आधार पर plain CSS के लिए यह टूल विकसित किया गया

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-07-14
Hacker News राय
  • कुछ बॉक्स जोड़ने के बाद उन्हें ओवरलैप करते हुए खिसकाने पर ग्रिड की सीमा से बाहर निकलने की समस्या होती है
  • Tailwind Grid Generator बनाकर सकारात्मक फ़ीडबैक मिला, और उसी के आधार पर plain CSS के लिए यह टूल विकसित किया गया
  • ग्रिड सेटिंग्स की तुलना में dynamic rearrangement अधिक कठिन समस्या है
    • MDN को देखकर यह पता लगाया कि ग्रिड में कॉलम कैसे घटाए या बढ़ाए जाएँ
    • साधारण utility बार-बार होने वाले काम को आसान बनाने में उपयोगी होती है
    • ग्रिड configuration state को URL में सेव करना उपयोगी हो सकता है
  • यह generator सीखने के टूल के रूप में उपयोगी है, और syntax व features समझ लेने पर इसे अधिक लचीले ढंग से इस्तेमाल किया जा सकता है
    • Chrome Dev Tools भी ग्रिड को संशोधित करके बदलाव तुरंत देखने में उपयोगी है
    • ग्रिड पर एक पोस्ट लिखी गई है
  • एक पुराने प्रोग्रामर के रूप में, table का उपयोग करके ग्रिड लिखने की आदत है, लेकिन CSS layout कठिन लगता है
    • ऐसे टूल बहुत मददगार हैं
  • कुछ साल पहले इसी तरह का एक साइट generator मिला था, लेकिन उसमें drag-and-drop फीचर नहीं था
    • CSS ग्रिड की बुनियादी अवधारणाएँ जैसे grid-template-columns, gap आदि सीखी थीं
    • आगे भी अच्छा काम जारी रखने की शुभकामनाएँ
  • जब ग्रिड पहली बार आया था, तब लगा था कि template areas के आधार पर यह वेब layout को बुनियादी रूप से बदल देगा
    • आंतरिक framework नहीं बना पाया और flex का उपयोग किया
    • Tailwind आने के बाद तेज़ी से responsive frontend लिखने के लिए ज़रूरी सब कुछ मिल गया
    • template areas का उपयोग करने वाले किसी अच्छे framework या उदाहरण के बारे में जानने की उत्सुकता है
    • अगली बार ग्रिड पर काम करते समय इस टूल का उपयोग करूँगा
  • दो bug मिले
    • ब्राउज़र विंडो का आकार बदलने पर चौड़ाई responsive नहीं होती
    • बॉक्स कंटेनर से छोटे होने पर ग्रिड में नई पंक्ति अधिक ऊपर दिखाई देती है
  • मैं वेब डेवलपर नहीं हूँ, लेकिन लगता है कि 12 से अधिक कॉलम की ज़रूरत पड़ सकती है
    • बड़ा नंबर डालने पर कॉलम अजीब तरीके से parse होते हैं
  • UX बहुत अच्छा है
    • मैं पेज layout अक्सर नहीं लिखता, इसलिए ग्रिड syntax को गहराई से नहीं सीखा, लेकिन इस टूल को बुकमार्क करके रखूँगा