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 ग्रिड टेम्पलेट कोड कॉपी करा.
तुमच्या ब्राउझरमध्ये चालते
वापरण्यासाठी मोफत

How to use

स्तंभ आणि पंक्ती संख्या सेट करा.
ट्यून अंतर आणि ट्रॅक आकारमान.
ग्रिड 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 तपासा (रीसेट, वारसा मिळालेले रंग). व्युत्पन्न केलेला नियम प्रथम एका वेगळ्या स्टाईलशीटमध्ये कॉपी करा.

FAQ

हे माझे CSS अपलोड करते का?

नाही. जनरेटर आणि कन्व्हर्टर तुमच्या ब्राउझरमध्ये थेट पूर्वावलोकनासह चालतात.

मला खाते हवे आहे का?

नाही. टूल उघडा, नियंत्रणे सुधारा आणि CSS कॉपी करा.