free
CSS Grid Generator — free
ToolHQ में CSS Grid layout code को visually generate करें।
1
2
3
4
5
6
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); column-gap: 16px; row-gap: 16px;
How to use CSS Grid Generator
1
स्टेप 1: अपना Grid Layout चुनें
अपने grid layout के लिए rows और columns की संख्या चुनें। आप विभिन्न pre-designed templates में से चुन सकते हैं या शुरुआत से एक custom layout बना सकते हैं।
2
Step 2: Grid Items जोड़ें
ToolHQ में अपने layout पर grid items को drag और drop करके एक आकर्षक design बनाएं। आप आवश्यकतानुसार प्रत्येक item के size, color और position को adjust कर सकते हैं।
3
स्टेप 4: CSS Code Generate करें
एक बार जब आप अपना grid layout डिज़ाइन कर लें, तो 'Generate CSS' बटन पर क्लिक करें ताकि आपको एक कस्टम CSS code मिल जाए जिसे आप अपनी HTML फ़ाइल में कॉपी और पेस्ट कर सकते हैं।