कंटेनर का क्वेरी कार्ड

इस डेमो में, स्वाभाविक और रिस्पॉन्सिव कार्ड (स्क्रीन के हिसाब से साइज़ बदलने वाला) कार्ड बनाने के लिए, कंटेनर क्वेरी का इस्तेमाल किया जाता है. जब कार्ड का साइज़ बड़ा होता है, तो वह एक कॉलम वाले लेआउट से ज़्यादा पतले साइज़ वाले लेआउट में दो कॉलम वाले लेआउट में बदल जाता है.

कंटेनर बनाने के लिए, पहले पैरंट फ़ोल्डर में कंटेनमेंट सेट करें:

/* Set containment on parent */
.container {
  container-name: myContainer;
  container-type: inline-size;
  /* You can also use the shorthand property `container: myContainer / inline-size`.
}

कुछ बेस स्टाइल सेट किए जा सकते हैं:

.desc {
  display: none;
}

.card {
  text-align: center;
  padding: 0.5rem;
}

साथ ही, उन बेस स्टाइल को उस पैरंट कंटेनर की इनलाइन चौड़ाई के हिसाब से अपडेट करें:

/* 2-column grid layout at >=350px */
@container (min-width: 350px) {
  .card {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
}

/* Display description at >=500px */
@container (min-width: 500px) {
  .desc {
    display: block;
  }
}

इसका मतलब है कि अगर आपके यूज़र इंटरफ़ेस (यूआई) के अलग-अलग हिस्सों में बिलकुल यही कॉम्पोनेंट है, तो वह अपने कंटेनर का साइज़ बदलने और उसे सबसे सही तरीके से फ़िट करने के लिए, अपने लॉजिक का इस्तेमाल कर सकता है. अगर आपके पास सिर्फ़ ग्लोबल व्यूपोर्ट पर भरोसा करने की ज़रूरत होती, तो आप इससे बेहतर कार्ड के लेआउट को कंट्रोल कर पाते हैं. नीचे दी गई टेबल में, कंटेनर क्वेरी कार्ड को एक ग्रिड में अलग-अलग कॉलम चौड़ाई वाले ग्रिड में रखकर यह दिखाया गया है:

Codepen पर इस डेमो को देखें

एचटीएमएल

<div class="container">
  <div class="card">
    <div class="visual"></div>
    <div>
      <div class="meta">
        <h1>Card Title Here</h1>
        <h2 class="time">Subtitle</h2>
      </div>
        <p class="desc">Here is some descriptive text to support the main idea of the card. It will be hidden when there is less inline space.</p>
      <button>I'm a button</button>
    </div>
  </div>
</div>

CSS

        /* Set containment on parent */
.container {
  container: inline-size;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

/* Base Styles */
.visual {
  aspect-ratio: 1 / 1;
}

.desc {
  display: none;
}

.card {
  text-align: center;
  padding: 0.5rem;
}

/* Responsive styles */

/* 2-column grid layout at >=350px */
@container (min-width: 350px) {
  .card {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
}

/* Display description at >=500px */
@container (min-width: 500px) {
  .desc {
    display: block;
  }
}