हाल में उपयोग किए गए

    कोई टूल खोलें, वह यहाँ दिखाई देगा।

    CSS Grid जनरेटर

    कोड बनाने की सुविधा वाला दृश्य CSS Grid लेआउट निर्माता

    इस टूल को शेयर करें

    समस्या की रिपोर्ट करें

    निजी इनपुट या फ़ाइलें शामिल किए बिना समस्या का वर्णन करें।

    यह टूल कितना उपयोगी था?

    यह टूल कितना उपयोगी था?

    लेआउट सेटिंग

    प्रीसेट लेआउट

    प्रति-आइटम स्थान

    इसकी प्रॉपर्टी संपादित करने के लिए प्रीव्यू या सूची में कोई आइटम चुनें।

    CSS Grid त्वरित संदर्भ

    ग्रिड ट्रैक

    लचीले ट्रैक के लिए fr इकाइयाँ, निश्चित के लिए px/%, और सामग्री के आकार के ट्रैक के लिए auto का उपयोग करें।

    repeat() फ़ंक्शन

    repeat(3, 1fr) असल में 1fr 1fr 1fr का संक्षिप्त रूप है। रेस्पॉन्सिव ग्रिड के लिए auto-fill या auto-fit का उपयोग करें।

    आइटम फैलाना

    N ट्रैक में फैलाने के लिए span N का उपयोग करें, या सभी कॉलम/पंक्तियों में फैलाने के लिए 1 / -1।

    लाइव प्रीव्यू

    जनरेट किया गया CSS

    .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 10px;
}

    सेटिंग बदलें या कोई आइटम चुनें। प्रीव्यू और CSS साथ-साथ अपडेट होते हैं।

    CSS Grid जनरेटर के बारे में

    CSS Grid जनरेटर CSS Grid लेआउट डिज़ाइन करने और बनाने का एक इंटरैक्टिव दृश्य टूल है। CSS Grid Layout CSS में उपलब्ध सबसे शक्तिशाली द्वि-आयामी लेआउट प्रणाली है, जो आपको कॉलम और पंक्तियाँ दोनों एक साथ तय करने देती है। यह टूल सीखने, प्रयोग करने और प्रोडक्शन-रेडी CSS Grid कोड बनाने के लिए व्यावहारिक तरीक़ा देता है।

    डिज़ाइन

    हाल ही में जोड़े गए

    सभी टूल

    गोपनीयता सेटिंग

    एनालिटिक्स, विज्ञापन और वैयक्तिकरण के लिए अपनी प्राथमिकताएँ चुनें। ज़रूरी स्टोरेज आपकी थीम और सहेजे गए टूल जैसी सुविधाओं को चालू रखता है।

    ज़रूरी स्टोरेज हमेशा चालू रहता है।