ListFan
डिज़ाइन · मुफ़्त

CSS Grid जनरेटर

कॉलम, पंक्ति और अंतर से ग्रिड पूर्वावलोकन और CSS बनाएँ।

01मान दर्ज करें

ब्राउज़र में चलता है
उदाहरण
px

02CSS Grid जनरेटर

ब्राउज़र में चलता है

यह कैसे काम करता है

कॉलम, पंक्ति और अंतर से ग्रिड पूर्वावलोकन और CSS बनाएँ।

ब्राउज़र में चलता है

आपका डेटा आपके पास

डेटा इसी पेज पर संसाधित होता है और सर्वर पर नहीं भेजा जाता।

इस टूल के बारे में

कॉलम, पंक्ति और अंतर से ग्रिड पूर्वावलोकन और CSS बनाएँ।

समान कॉलम वाली CSS Grid बनाएँ और कोड अपने पेज में बदलें।

टूल इस्तेमाल करें ↑

कैसे इस्तेमाल करें?

  1. मान दर्ज करें

    कॉलम · पंक्तियाँ · अंतर

  2. गणना / बनाएँ

    कॉलम, पंक्ति और अंतर से ग्रिड पूर्वावलोकन और CSS बनाएँ।

  3. परिणाम

    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

गणना विधि

समान कॉलम वाली CSS Grid बनाएँ और कोड अपने पेज में बदलें।

उदाहरण

CSS Grid जनरेटर

कॉलम
3
पंक्तियाँ
2
अंतर
16 px
परिणाम
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

सामान्य प्रश्न

परिणाम कैसे समझें?

समान कॉलम वाली CSS Grid बनाएँ और कोड अपने पेज में बदलें।

मेरा डेटा कहाँ जाता है?

गणनाएँ आपके उपकरण पर होती हैं। इनपुट सर्वर पर नहीं भेजे जाते।