लोड हो रहा है...

CSS कंटेनर क्वेरी

Nesting ने कंपोनेंट सेलेक्टर एक जगह रखे। मीडिया क्वेरी अभी भी viewport देखती है। कंटेनर क्वेरी दूसरा सवाल पूछती है: इस पैरेंट बॉक्स की चौड़ाई कितनी है? इसी से एक प्रोडक्ट कार्ड संकीर्ण रेल में छोटी रहती है और मुख्य कॉलम में खुल जाती है — भले ब्राउज़र विंडो वही हो।

viewport क्यों कम पड़ता है

लेआउट में अक्सर वही कंपोनेंट अलग-अलग स्लॉट में जाता है: 16rem की साइडबार रेल और लचीला मुख्य क्षेत्र। दोनों का viewport चौड़ाई एक जैसी, इसलिए @media (min-width: …) दोनों पर एकसा चलता है। स्टाइल उस कंटेनर से जुड़नी चाहिए जो कार्ड के चारों ओर है, पूरी स्क्रीन से नहीं।

माप का containment संदर्भ बनाएँ

वह पैरेंट चुनें जो अपना आकार बताए। container-type लगाएँ — आमतौर inline-size, ताकि पैरेंट की inline-size (क्षैतिज लेखन में चौड़ाई) पूछ सकें, बिना दोनों अक्ष पर पूरा size containment थोपे:

Turn a rail into a size container

css

.rail {
container-type: inline-size;
container-name: rail;
width: 16rem;
padding: 1rem;
background: #f8fafc;
}

.stage {
container-type: inline-size;
container-name: stage;
flex: 1;
min-width: 0;
padding: 1.25rem;
}

container-type के बिना @container के पास भरोसेमंद माप नहीं। container-name वैकल्पिक है; कई पूर्वज कंटेनर हों तो नाम से एक को लक्षित करें।

`@container` से पैरेंट पूछें

तैयारी के बाद नियम @container में size शर्त के साथ लपेटें। वंशज तब प्रतिक्रिया देते हैं जब वही बॉक्स मेल खाए — सिर्फ viewport बदलने पर नहीं:

Product card reacts to its parent width

css

.product-card {
display: grid;
gap: 0.75rem;
padding: 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
background: #fff;
}

.product-card .media {
aspect-ratio: 16 / 10;
border-radius: 0.5rem;
background: #cbd5e1;
}

.product-card .meta {
font-size: 0.875rem;
color: #64748b;
}

@container (min-width: 28rem) {
.product-card {
grid-template-columns: 10rem 1fr;
align-items: center;
}

.product-card .title {
font-size: 1.25rem;
}
}

संकीर्ण .rail में .product-card एक कॉलम में रहती है। वही HTML चौड़े .stage में — दो कॉलम — HTML और viewport समान, कंटेनर चौड़ाई अलग।

नाम वाले कंटेनर

नेस्टेड कंटेनर से भ्रम हो तो @container के बाद नाम दें:

Target a named containment context

css

@container stage (min-width: 36rem) {
.product-card {
grid-template-columns: 12rem 1fr auto;
gap: 1.25rem;
}

.product-card .buy {
justify-self: end;
}
}

@container rail (max-width: 18rem) {
.product-card .meta {
display: none;
}
}

@container stage (…) सिर्फ stage नाम वाले पूर्वज की सुनता है। रेल की tight नियम और stage की चौड़ी नियम एक-दूसरे से नहीं टकरातीं।

कंटेनर क्वेरी यूनिट

containment संदर्भ मिलते ही cqi (query कंटेनर की inline-size का 1%) और cqw (चौड़ाई का 1%) टाइप और spacing पैरेंट के साथ बढ़ते हैं, viewport (vi / vw) के साथ नहीं:

Type that tracks the container

css

.product-card .title {
font-size: clamp(1rem, 0.85rem + 2.5cqi, 1.5rem);
}

.product-card {
padding: clamp(0.75rem, 2.5cqi, 1.5rem);
}

पिछले Modern Toolkit पाठों के var() और clamp() के साथ जोड़ें। कंटेनर यूनिट query वाले containment संदर्भ को मापती हैं — दोबारा इस्तेमाल होने वाले विजेट के लिए उपयुक्त।

कंटेनर बनाम मीडिया — कौन क्या करे?

📊 कंटेनर क्वेरी बनाम मीडिया क्वेरी

आप क्या पूछ रहे हैं	बेहतर	सामान्य औज़ार
ब्राउज़र viewport कितना चौड़ा?	पेज शेल, नेव, पूरे पेज की कॉलम	`@media (min-width: …)`
कंपोनेंट के चारों यह पैरेंट कितना चौड़ा?	कार्ड, विजेट, अलग स्लॉट में embed	`container-type` के बाद `@container (min-width: …)`
दोनों चाहिए?	अक्सर हाँ	MQ पेज के लिए; CQ स्लॉट में कंपोनेंट

दो स्लॉट, एक कंपोनेंट

छोटा स्केच फायदा दिखाता है — दो कंटेनर, एक कार्ड क्लास:

Sidebar rail and main stage share one card

css

.page {
display: flex;
gap: 1rem;
align-items: start;
}

.rail {
container-type: inline-size;
container-name: rail;
width: 16rem;
}

.stage {
container-type: inline-size;
container-name: stage;
flex: 1;
min-width: 0;
}

/* Same .product-card class in both slots — @container rules above decide layout */

स्लॉट चौड़ाई के लिए .product-card--sidebar और .product-card--main अलग बनाने की ज़रूरत नहीं। स्लॉट आकार बताता है; कार्ड सुनती है।

पेज मीडिया और कंपोनेंट कंटेनर साथ

viewport क्वेरी पेज निर्णयों के लिए रखें (साइट nav संकुचित, शेल एक कॉलम)। कंटेनर क्वेरी कंपोनेंट के लिए, जिस स्लॉट में पेज ने रखा:

Viewport for the page, container for the card

css

@media (max-width: 40rem) {
.page {
flex-direction: column;
}

.rail {
width: auto;
}
}

@container (min-width: 28rem) {
.product-card {
grid-template-columns: 10rem 1fr;
}
}

छोटे फ़ोन पर पेज स्टैक; चौड़े डेस्कटॉप पर रेल संकीर्ण, stage चौड़ा — यह अंतर साफ़ सिर्फ कंटेनर क्वेरी से दिखता है।

खुद आज़माएँ

कार्ड के wrapper पर container-type: inline-size; DevTools में containment संदर्भ देखें।
@container (min-width: 24rem) से स्टैक से दो कॉलम।
container-name: panel और @container panel (min-width: 30rem) से लक्षित करें।
शीर्षक cqi से; सिर्फ पैरेंट resize करें (विंडो नहीं)।
पेज शेल पर एक @media रखें; वही तर्क कार्ड में दोहराएँ नहीं।

आम गलतियाँ

पूर्वज पर container-type के बिना @container — मापने को कुछ नहीं
हर मीडिया क्वेरी कंटेनर से बदलना — पेज शेल @media का है
तीन नेस्टेड कंटेनर, कौन सी चौड़ाई जीते — नाम दें, स्पष्ट लक्ष्य
viewport breakpoint (48rem) हर विजेट में कॉपी — स्लॉट पर ट्यून, डिवाइस कैटलॉग नहीं
nesting (&) और containment मिलाना — nesting सेलेक्टर सँभालता है; कंटेनर क्वेरी बॉक्स मापती है

सार

कंटेनर क्वेरी पैरेंट के आकार से स्टाइल, सिर्फ viewport से नहीं
container-type (अक्सर inline-size); ज़रूरत हो तो container-name
@container (min-width: …) / @container name (…) से वंशज बदलें
लंबाई कंटेनर से जुड़े तो cqi / cqw
Modern Toolkit में अगला: feature queries (@supports) — ब्राउज़र क्षमता पर स्टाइल

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा