CSS उपकरण/CSS ग्रिड जेनरेटर
CSS ग्रिड जेनरेटर
इंटरैक्टिव विज़ुअल नियंत्रणों के साथ जटिल CSS Grid लेआउट डिज़ाइन करें
CSS Grid Guide
Learn how to create complex two-dimensional layouts
What is CSS Grid?
CSS Grid is a two-dimensional layout system that handles both columns and rows. It provides precise control over the placement and sizing of elements, making it ideal for complex page layouts, dashboards, and image galleries.
How to Use This Tool
- Define grid columns and rows using the template settings
- Add grid items and position them using grid-column/row
- Adjust gap, alignment, and content distribution
- Try preset layouts or create your own custom design
Pro Tips
- Use fr units for flexible track sizing that adapts to available space
- minmax() function creates responsive columns without media queries
- Named grid lines and areas make complex layouts more readable
Browser Support
CSS Grid is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It has excellent support for production use with over 95% global coverage.
अक्सर पूछे जाने वाले प्रश्न
CSS Grid और Flexbox में क्या अंतर है?
Flexbox एक-आयामी (रो या कॉलम) लेआउट के लिए है, जबकि Grid दो-आयामी (रो और कॉलम एक साथ) लेआउट के लिए है। साधारण नेविगेशन या कार्ड सूची के लिए Flexbox उपयुक्त है, जबकि जटिल पेज लेआउट, डैशबोर्ड, गैलरी के लिए Grid बेहतर है।
fr यूनिट का क्या अर्थ है?
fr (fraction) उपलब्ध स्थान का अंश है। 'grid-template-columns: 1fr 2fr' का अर्थ है पहला कॉलम 1/3, दूसरा 2/3। fr यूनिट गैप और निश्चित आकारों के बाद शेष स्थान को विभाजित करती है। यह प्रतिशत से अधिक लचीली और सुविधाजनक है।
grid-template-areas का उपयोग कैसे करें?
grid-template-areas से आप ASCII आर्ट जैसे टेक्स्ट लेआउट परिभाषित कर सकते हैं। उदाहरण: '"header header" "sidebar main" "footer footer"'। प्रत्येक आइटम को grid-area: header; जैसे नाम दें। जटिल लेआउट को समझने और बनाए रखने में आसान।
रेस्पॉन्सिव ग्रिड कैसे बनाएं?
auto-fit या auto-fill के साथ minmax() का उपयोग करें। उदाहरण: 'grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))'। यह स्वचालित रूप से स्क्रीन आकार के अनुसार कॉलम की संख्या समायोजित करता है। मीडिया क्वेरी के बिना रेस्पॉन्सिव लेआउट संभव है।
auto-fit और auto-fill में क्या अंतर है?
दोनों उपलब्ध स्थान के अनुसार कॉलम बनाते हैं, लेकिन अतिरिक्त स्थान को अलग तरह से संभालते हैं। auto-fill खाली कॉलम बनाता है, auto-fit आइटम को खींचता है। अधिकांश मामलों में auto-fit अधिक वांछित परिणाम देता है।