CSS Grid परिचय
CSS Grid एक शक्तिशाली लेआउट सिस्टम है जो वेब पेज पर तत्वों को दो आयामी ग्रिड (rows और columns) में व्यवस्थित करने की अनुमति देता है। इसे एक घर बनाने के रूप में सोचें: सबसे पहले आप कमरे (rows और columns) डिजाइन करते हैं और फिर उनमें फर्नीचर (content) रखते हैं। CSS Grid का उपयोग करके आप कंटेंट को स्पष्ट और लचीले ढंग से व्यवस्थित कर सकते हैं, जो इसे पोर्टफोलियो वेबसाइट, ब्लॉग, ई-कॉमर्स, न्यूज़ साइट या सोशल प्लेटफ़ॉर्म के लिए आदर्श बनाता है।
इस परिचय में आप सीखेंगे कि कैसे एक बेसिक ग्रिड बनाते हैं, कॉलम और रो को परिभाषित करते हैं, आइटम्स के बीच स्पेसिंग को नियंत्रित करते हैं और सरल लेकिन प्रभावी लेआउट बनाते हैं। CSS Grid डिज़ाइन को आसान और maintainable बनाता है, ठीक जैसे किसी लाइब्रेरी को व्यवस्थित करना या कमरे को सजाना। इस ट्यूटोरियल को पूरा करने के बाद, आप अपने प्रोजेक्ट्स के लिए बेसिक लेआउट बना पाएंगे और आगे की responsive ग्रिड तकनीक और JavaScript इंटरैक्शन के लिए मजबूत आधार तैयार करेंगे।
मूल उदाहरण
css.container {
display: grid; /* enable grid layout */
grid-template-columns: 100px 100px 100px; /* three columns */
grid-template-rows: 50px 50px 50px; /* three rows */
gap: 10px; /* space between items */
}
.item {
background-color: lightblue; /* highlight items */
text-align: center; /* center text */
}इस बेसिक उदाहरण में, container को display: grid के साथ ग्रिड बनाया गया है। grid-template-columns तीन कॉलम बनाता है, प्रत्येक 100px चौड़ा, और grid-template-rows तीन rows बनाता है, प्रत्येक 50px ऊंचा। gap 10px का स्पेस डालता है, जिससे आइटम्स के बीच स्पष्टता बनी रहती है, जैसे कमरे में फर्नीचर के बीच स्पेस।
.item क्लास प्रत्येक आइटम को बैकग्राउंड कलर देती है और टेक्स्ट को सेंटर करती है। शुरुआती लोग अक्सर पूछते हैं कि fixed pixels क्यों इस्तेमाल होते हैं; यह visualization आसान बनाने के लिए है। वास्तविक एप्लिकेशन में, responsive डिज़ाइन के लिए fr या percentage जैसी flexible units बेहतर होती हैं। यह बेसिक लेआउट portfolio items, blog posts, या e-commerce products को व्यवस्थित करने के लिए उपयोगी है।
व्यावहारिक उदाहरण
css.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* three equal columns */
grid-auto-rows: 200px; /* automatic row height */
gap: 20px;
}
.portfolio-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 15px;
}इस व्यावहारिक उदाहरण में repeat(3, 1fr) तीन बराबर चौड़ाई वाले कॉलम बनाता है। प्रत्येक कॉलम उपलब्ध स्पेस का एक fraction लेता है, जिससे ग्रिड responsive बनता है। grid-auto-rows प्रत्येक row की ऊंचाई 200px सेट करता है। gap 20px स्पेस देता है, जिससे आइटम्स स्पष्ट दिखाई दें।
portfolio-item के बैकग्राउंड, बॉर्डर और padding से प्रत्येक आइटम को अलग दिखाया गया है। यह लेआउट portfolio, blog या e-commerce product gallery के लिए आदर्श है। CSS Grid से आप columns और rows की संख्या आसानी से बदल सकते हैं, बिना प्रत्येक आइटम को individually adjust किए, ठीक वैसे जैसे लाइब्रेरी में shelves को adjust किया जाता है।
Best Practices:
- Mobile-First approach अपनाएँ, छोटे स्क्रीन के लिए डिज़ाइन करें और बड़े स्क्रीन पर expand करें।
- Fixed pixels के बजाय flexible units (fr) का उपयोग करें।
- साफ और maintainable CSS लिखें।
-
अलग-अलग devices पर layouts test करें।
Common Mistakes: -
Excessive fixed sizes, जिससे grid rigid हो जाए।
- Responsive design ignore करना।
- Excessive property overrides, जिससे maintainability घटे।
Debugging Tips: Browser developer tools का use करके grid lines और gap जांचें, और real content के साथ test करें कि layout सही और readable है।
📊 त्वरित संदर्भ
| Property/Method | Description | Example |
|---|---|---|
| display | Grid layout enable करना | display: grid; |
| grid-template-columns | Columns define करना | grid-template-columns: 100px 200px; |
| grid-template-rows | Rows define करना | grid-template-rows: 50px 50px; |
| gap | Grid items के बीच spacing | gap: 10px; |
| repeat | Columns या rows repeat करना | grid-template-columns: repeat(3, 1fr); |
| grid-auto-rows | Automatic row height set करना | grid-auto-rows: 150px; |
संक्षेप में, CSS Grid वेब लेआउट को organized, flexible और visually appealing बनाने का महत्वपूर्ण tool है। grid-template-columns, grid-template-rows, gap और repeat जैसी properties की जानकारी आपको portfolio, blogs, news sites और e-commerce layouts efficiently बनाने में मदद करती है। CSS Grid HTML structure के साथ closely connected है और JavaScript के साथ dynamic layouts के लिए integrate किया जा सकता है। अगले steps में grid-template-areas, align-items और justify-content सीख सकते हैं। नियमित अभ्यास से professional layouts बनाना आसान हो जाएगा।
🧠 अपने ज्ञान की परीक्षा करें
अपना ज्ञान परखें
व्यावहारिक प्रश्नों के साथ इस विषय की अपनी समझ का परीक्षण करें।
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी