Grid कंटेनर
Grid कंटेनर CSS Grid Layout का मूल आधार है, जो Grid Items को पंक्तियों और स्तंभों में व्यवस्थित करता है। इसे एक घर के निर्माण के रूप में सोचें: Grid कंटेनर नींव और दीवारों के रूप में कार्य करता है, जबकि Grid Items कमरे और फर्नीचर की तरह व्यवस्थित किए जाते हैं। Portfolio वेबसाइट में यह प्रोजेक्ट थंबनेल्स को सुव्यवस्थित करता है, ब्लॉग में पोस्ट और साइडबार को स्पष्ट रूप से व्यवस्थित करता है, ई-कॉमर्स साइट पर उत्पाद कार्ड को उत्तरदायी तरीके से दिखाता है, और समाचार साइट या सोशल प्लेटफ़ॉर्म पर इंटरैक्टिव क्षेत्रों को संतुलित करता है।
इस ट्यूटोरियल में, आप सीखेंगे कि कैसे grid-template-areas का उपयोग करके सेमांटिक लेआउट बनाएं, ऑटो प्लेसमेंट के माध्यम से डायनामिक कंटेंट को व्यवस्थित करें और Fractional Units (fr), minmax और repeat का उपयोग करके उत्तरदायी और लचीले ग्रिड बनाएं। यह कौशल HTML संरचना और JavaScript इंटरैक्शन के साथ मिलकर जटिल लेआउट बनाने में मदद करता है, जैसे कि पुस्तकालय का संगठन जहां हर आइटम का स्पष्ट स्थान होता है।
मूल उदाहरण
css.grid-container {
display: grid; /* Activate grid layout */
grid-template-columns: 150px repeat(3, 1fr) 150px; /* Fixed and flexible columns */
grid-template-rows: 100px auto 100px; /* Define row heights */
gap: 20px; /* Space between items */
}
.grid-item {
background-color: #f0f4c3; /* Highlight items */
border: 1px solid #cddc39; /* Visible borders for clarity */
}इस उदाहरण में, display: grid .grid-container में ग्रिड लेआउट सक्रिय करता है। grid-template-columns पहली और अंतिम कॉलम को 150px फिक्स्ड रखता है और बीच की तीन कॉलम्स को 1fr यूनिट देता है, जिससे शेष स्थान समान रूप से वितरित होता है। grid-template-rows पंक्तियों की ऊँचाई को सेट करता है: पहली और अंतिम पंक्ति 100px, मध्य पंक्ति auto जो सामग्री के अनुसार बढ़ती है।
gap 20px का अंतर बनाता है ताकि आइटम्स के बीच उचित दूरी रहे। प्रत्येक .grid-item में बैकग्राउंड और बॉर्डर हैं, जिससे इसकी स्थिति स्पष्ट होती है। यह तकनीक Portfolio, Blog या E-Commerce ग्रिड्स के लिए उपयोगी है, क्योंकि यह स्पष्ट, लचीले और उत्तरदायी लेआउट प्रदान करती है।
व्यावहारिक उदाहरण
css.dashboard {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 80px 1fr 60px;
gap: 15px;
}
.header { grid-area: header; background-color: #ffe0b2; }
.sidebar { grid-area: sidebar; background-color: #c8e6c9; }
.main { grid-area: main; background-color: #bbdefb; }
.footer { grid-area: footer; background-color: #ffccbc; }यह व्यावहारिक उदाहरण एक Dashboard लेआउट दिखाता है। grid-template-areas का उपयोग करके सेमांटिक नाम दिए गए हैं। grid-template-columns एक फिक्स्ड Sidebar और दो flexible मुख्य कॉलम बनाता है। grid-template-rows header, main और footer की ऊँचाई निर्धारित करता है। gap 15px अंतर बनाता है।
grid-template-areas का उपयोग Blogs, News Portals और E-Commerce Dashboards में आसान लेआउट बदलाव के लिए किया जाता है। यह ऑटो प्लेसमेंट और flexible units के साथ मिलकर उत्तरदायी और maintainable लेआउट सुनिश्चित करता है, जैसे किसी कमरे को सजाना या पुस्तकालय को व्यवस्थित करना।
Best Practices:
- Mobile-First डिजाइन का पालन करें।
- Fractional Units (fr) का उपयोग करें।
- Descriptive नाम grid-template-areas और grid-area के लिए रखें।
-
विभिन्न स्क्रीन आकारों पर लेआउट परीक्षण करें।
Common Mistakes: -
Excessive fixed pixel values से लचीलापन घटता है।
- gap न देना लेआउट को अव्यवस्थित बनाता है।
- Specificity conflicts CSS में लेआउट को प्रभावित कर सकते हैं।
- grid-template-areas और HTML elements का mismatch।
Debugging: Browser dev tools से grid lines और grid-area असाइनमेंट चेक करें।
📊 त्वरित संदर्भ
| Property/Method | Description | Example |
|---|---|---|
| display | Activate grid layout | display: grid; |
| grid-template-columns | Define column sizes | grid-template-columns: 100px 1fr 2fr; |
| grid-template-rows | Define row sizes | grid-template-rows: 50px auto 50px; |
| grid-template-areas | Define named layout areas | grid-template-areas: "header header" "sidebar main"; |
| gap | Set spacing between items | gap: 10px; |
| grid-area | Assign item to a named area | grid-area: main; |
सारांश और अगले कदम: Grid कंटेनर के समझ से आप structured, responsive और maintainable लेआउट बना सकते हैं। display: grid, grid-template-rows, grid-template-columns, grid-template-areas, gap और grid-area का mastery आपको जटिल लेआउट को सरलता से बनाने में मदद करता है। यह HTML और JavaScript के साथ मिलकर dynamic इंटरफेस विकसित करने में सक्षम बनाता है। अगले विषयों में align-items, justify-items, auto-placement, minmax और repeat शामिल करें। Portfolio, Blogs और Dashboards पर प्रोजेक्ट करके व्यावहारिक कौशल प्राप्त करें।
🧠 अपने ज्ञान की परीक्षा करें
अपना ज्ञान परखें
व्यावहारिक प्रश्नों के साथ इस विषय की अपनी समझ का परीक्षण करें।
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी