🟦

मोफत CSS ग्रिड जनरेटर

CSS ग्रिड दृश्यरूपात डिझाइन करा — ट्रॅक, युनिट्स आणि गॅप्स — आणि तयार केलेले CSS व HTML कॉपी करा.

तुमच्या ब्राउझरमध्ये चालतेसाइन-अप नाही, पॉप-अप नाहीलॉगिन आवश्यक नाहीकायमचे विनामूल्य

एकदा लोड झाल्यावर ऑफलाइन काम करते

CSS ग्रिड दृश्यरूपात डिझाइन करा: कॉलम आणि रो जोडा, fr/px/auto/min-content युनिट्स मिसळा, गॅप्स समायोजित करा आणि लाइव्ह प्रीव्ह्यू पाहा. प्रोडक्शन-रेडी CSS आणि जुळणारे HTML कॉपी करा.

प्रीसेट्स

स्तंभ (3)

पंक्ती (2)

कॉलम गॅप: 16pxरो गॅप: 16px

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

css

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

html

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 सर्वकाही तुमच्या ब्राउझरमध्येच चालते — काहीही अपलोड होत नाही.

हे कसे कार्य करते

CSS grid दृश्यरित्या डिझाइन करा: 8 स्तंभ व 8 ओळींपर्यंत जोडा, प्रत्येक track ला fr, px, auto किंवा min/max-content वर सेट करा, आणि ओळ/स्तंभ अंतर समायोजित करा. क्रमांकित लाइव्ह प्रिव्ह्यू तात्काळ अपडेट होतो आणि तयार केलेला grid-template CSS व जुळणारा HTML तुमच्या clipboard पासून एक क्लिक दूर आहे.

1
grid आकार द्या
+ व − ने स्तंभ व ओळी जोडा/काढा.
2
tracks सेट करा
प्रत्येक स्तंभ व ओळीला स्वतःचे एकक मिळते (1fr, 100px, auto…).
3
अंतर तयार करा
वेगळे row-gap व column-gap स्लायडर्स.
4
कोड कॉपी करा
production-रेडी CSS व जुळणारा HTML सांगाडा.

सर्वकाही तुमच्या ब्राउझरमध्ये चालते — काहीही अपलोड होत नाही.

मोफत CSS ग्रिड जनरेटर

हे कसे कार्य करते

संबंधित साधने

CSS Flexbox जनरेटर

CSS clamp() जनरेटर

इनव्हॉइस जनरेटर

वारंवार विचारले जाणारे प्रश्न