CSS रिस्पॉन्सिव Grid
Grid Areas ने पेज मैप नाम देना सिखाया। Responsive Grid पूछता है: जब viewport संकीर्ण हो, तो क्या होता है — कॉलम गिरते हैं? साइडबार हेडर के नीचे आता है? कार्ड बिना दूसरे HTML के बदलते हैं? कुछ शांत breakpoint पैटर्न — Responsive Design मॉड्यूल आगे है।
Responsive grid टूलकिट
📊 Responsive grid एक नज़र में
| उपकरण | रोज़ का काम |
|---|---|
grid-template-columns |
media query में ट्रैक सूची बदलें (जैसे दो → एक कॉलम) |
grid-template-areas |
जब स्टैक बेहतर हो तो नाम वाला मैप दोबारा बनाएं |
repeat(auto-fit, minmax(...)) |
गिनती के हिसाब से breakpoint के बिना लचीले कार्ड कॉलम |
| Media query | grid बदलाव सिर्फ मेल खाते viewport पर |
gap |
ट्रैक या मैप बदलने पर लय बनाए रखें |
| हर चौड़ाई के लिए अलग HTML नहीं | वही DOM; CSS लेआउट शिफ्ट करता है |
चौड़ी स्क्रीन पर जिस grid पर भरोसा है, वहीं से शुरू करें। एक साफ breakpoint पर कॉलम, पंक्ति या एरिया मैप बदलें — सब एक साथ नहीं। पिछले पाठ के नाम responsive स्वैप पढ़ने योग्य बनाते हैं।
Breakpoint पर कॉलम
जब दो-कॉलम shell फोन पर एक कॉलम हो, media query में grid-template-columns बदलें।
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}
@media (max-width: 40rem) {
.shell {
grid-template-columns: 1fr;
}
}
संकीर्ण स्क्रीन पर एरिया मैप दोबारा
header / aside / main साथ-साथ अक्सर नया grid-template-areas ब्लॉक चाहते हैं जब साइडबार हेडर के नीचे जाए। उद्धृत पंक्तियाँ दोबारा लिखें; क्षेत्र आयताकार रहें।
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
@media (max-width: 48rem) {
.shell {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"aside"
"main"
"footer";
}
}
कार्ड बोर्ड के लिए auto-fit और minmax
गैलरी और डैशबोर्ड में repeat(auto-fit, minmax(...)) से कॉलम जगह के अनुसार दिखें और wrap हों — अक्सर कम हाथ से tuned breakpoint।
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
संकीर्ण viewport अलग layout भाषा नहीं — वही grid टूल, अलग ट्रैक या मैप। «मोबाइल HTML» दोहराने से CSS बदलाव बेहतर।
शांत responsive grid आदत
पहले एक मुख्य breakpoint। जब लेबल मदद करें तो कॉलम बदलाव के साथ मैप दोबारा लिखें। जहाँ कार्ड संख्या लचीली हो auto-fit। DOM क्रम कीबोर्ड के लिए सही रखें। पूरा responsive सिद्धांत अगले मॉड्यूल में।
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas: "nav content";
gap: 1.25rem;
}
@media (max-width: 42rem) {
.page {
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"content";
}
}
.stats {
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr));
gap: 0.75rem;
}
@media (max-width: 36rem) {
.stats {
grid-template-columns: 1fr;
}
}
खुद आज़माएँ
max-width: 40remपर दो-कॉलम shell को एक कॉलम करें।- संकीर्ण स्टैक के लिए header / aside / main / footer मैप दोबारा लिखें।
repeat(auto-fit, minmax(14rem, 1fr))से कार्ड पंक्ति बनाएं।- एक शांत breakpoint — पूरा grid एक साथ reset न करें।
- एक HTML ट्री; अगला पाठ Responsive Design।
आम गलतियाँ
- कॉलम बदलने या स्टैक के बजाय ट्रैक हमेशा सिकोड़ना
- CSS में grid अपडेट के बजाय अलग «मोबाइल HTML»
grid-template-areasपंक्तियाँ बदलते समय सेल गिनती मेल न खाना- एक विशाल media query जो सब reset कर दे
- इस पाठ को पूरा Responsive कोर्स मान लेना
सार
- Responsive grid चौड़ाई पर कॉलम, मैप और auto-fit बोर्ड ढालता है
- Media queries ट्रैक और मैप बदलाव सीमित करती हैं
- नाम वाले areas छोटी स्क्रीन पर मैप दोबारा लिखने से मेल खाते हैं
- शांत breakpoint और एक DOM
- Grid मॉड्यूल (490–530) पूरा; Responsive Design आगे
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी