CSS ग्रिड जेनरेटर

स्तम्भहरू, पङ्क्तिहरू, र खाली ठाउँहरू दृश्य रूपमा परिभाषित गर्नुहोस्, त्यसपछि तपाईंको लेआउटको लागि CSS ग्रिड टेम्प्लेट कोड प्रतिलिपि गर्नुहोस्।

CSS Grid Generator

Live

Columns3

Rows3

Gap12px

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

स्तम्भहरू, पङ्क्तिहरू, र ग्यापहरू दृश्यात्मक रूपमा परिभाषित गर्नुहोस्, त्यसपछि CSS ग्रिड टेम्प्लेट कोड प्रतिलिपि गर्नुहोस्।
तपाईको ब्राउजरमा चल्छ
प्रयोग गर्न नि: शुल्क

कसरी प्रयोग गर्ने

स्तम्भ र पङ्क्ति गणनाहरू सेट गर्नुहोस्।
ट्युन ग्याप र ट्र्याक साइजिङ।
ग्रिड CSS प्रतिलिपि गर्नुहोस्।

How this tool works

स्तम्भ र पङ्क्ति गणनाहरू सेट गर्नुहोस्।
ट्युन ग्याप र ट्र्याक साइजिङ।
ग्रिड CSS प्रतिलिपि गर्नुहोस्।

Recommended settings

पहिले पूर्वनिर्धारित विकल्पहरू प्रयोग गर्नुहोस्, त्यसपछि आवश्यक भए समायोजन गर्नुहोस्

Supported formats

Text / on-page input

File size and limits

धेरै जटिल बहु-तह पूर्वावलोकनहरू पुरानो फोनहरूमा ढिलो महसुस हुन सक्छ।

Privacy

रङ र CSS जेनरेटरहरू तपाईंको ब्राउजरमा पूर्ण रूपमा चल्छन्। पूर्वावलोकन र रूपान्तरणले तपाईंको शैलीहरू कहिल्यै अपलोड गर्दैन।

Common use cases

तपाईंलाई आवश्यक परेको बेला CSS ग्रिड जेनरेटर प्रयोग गर्नुहोस्: स्तम्भहरू, पङ्क्तिहरू, र ग्यापहरू दृश्यात्मक रूपमा परिभाषित गर्नुहोस्, त्यसपछि CSS ग्रिड टेम्प्लेट कोड प्रतिलिपि गर्नुहोस्।

Troubleshooting

पेस्ट गरेपछि पूर्वावलोकन फरक देखिन्छ

तपाइँको पृष्ठमा प्रतिस्पर्धात्मक CSS को लागी जाँच गर्नुहोस् (रिसेटहरू, विरासत प्राप्त रंगहरू)। उत्पन्न नियमलाई पहिले एक अलग स्टाइलसिटमा प्रतिलिपि गर्नुहोस्।

बारम्बार सोधिने प्रश्नहरू

के यसले मेरो CSS अपलोड गर्छ?

होइन। जेनेरेटर र कन्भर्टरहरू तपाईंको ब्राउजरमा लाइभ पूर्वावलोकनको साथ चल्छन्।

के मलाई खाता चाहिन्छ?

होइन। उपकरण खोल्नुहोस्, नियन्त्रणहरू ट्वीक गर्नुहोस्, र CSS प्रतिलिपि गर्नुहोस्।