कार्ड जोड़ें

इस डेमो में, आपने clamp() का इस्तेमाल करके, इस तरह से चौड़ाई सेट की है: width: clamp(<min>, <actual>, <max>).

इससे कम से कम और ज़्यादा से ज़्यादा साइज़ और असल साइज़ सेट होता है. वैल्यू के साथ, यह ऐसा दिख सकता है:

.parent {
  width: clamp(23ch, 60%, 46ch);
}

यहां कम से कम साइज़ 23ch या 23 वर्ण यूनिट है. साइज़ ज़्यादा से ज़्यादा 46ch, 46 वर्ण हो सकता है. वर्ण चौड़ाई की इकाइयां, एलिमेंट के फ़ॉन्ट साइज़ (खास तौर पर 0 ग्लिफ़ की चौड़ाई) पर आधारित होती हैं. 'असल' साइज़ 50% है, जो इस एलिमेंट की पैरंट चौड़ाई का 50% दिखाता है.

यहां clamp() फ़ंक्शन जो काम कर रहा है, वह इस एलिमेंट को 50% चौड़ाई बनाए रखने के लिए चालू कर रहा है जब तक 50% 50% की चौड़ाई 46ch से ज़्यादा (चौड़ी व्यूपोर्ट पर) या 23ch से कम हो (छोटे व्यूपोर्ट पर). वीडियो में देखें कि कैसे इस कार्ड की चौड़ाई, क्लैम्प किए गए ज़्यादा से ज़्यादा पॉइंट तक बढ़ती है और जैसे-जैसे पैरंट के स्ट्रेच और सिकुड़ती है, वैसे-वैसे कार्ड की चौड़ाई कम होती जाती है. इसके बाद, यह पैरंट के बीच में बना रहता है. इसके लिए, इसे बीच में रखने के लिए अतिरिक्त प्रॉपर्टी का इस्तेमाल किया जाता है. यह ज़्यादा साफ़-साफ़ लेआउट चालू करता है, क्योंकि टेक्स्ट बहुत चौड़ा नहीं होगा (46ch से ऊपर) या बहुत छोटा और पतला नहीं होगा (23ch से कम).

रिस्पॉन्सिव टाइपोग्राफ़ी को लागू करने के लिए, इस तकनीक का इस्तेमाल किया जा सकता है. उदाहरण के लिए: font-size: clamp(1.5rem, 20vw, 3rem). इस मामले में, किसी हेडलाइन का फ़ॉन्ट साइज़ हमेशा 1.5rem और 3rem के बीच बना रहेगा, लेकिन वह व्यूपोर्ट की चौड़ाई में फ़िट होने के लिए, 20vw के असल वैल्यू के हिसाब से बढ़ता और छोटा होता रहेगा.

कम से कम और ज़्यादा से ज़्यादा साइज़ वैल्यू के साथ साफ़-साफ़ दिखने की यह एक बेहतरीन तकनीक है. हालांकि, ध्यान रखें कि यह सभी मॉडर्न ब्राउज़र पर काम नहीं करती. इसलिए, पक्का करें कि आपके पास फ़ॉलबैक हों और जांच करें.

एचटीएमएल

<div class="parent">
  <div class="card">
    <h1>Title Here</h1>
    <div class="visual"></div>
    <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
  </div>
</div>

CSS

        .parent {
  display: grid;
  place-items: center;
}

.card {
  width: clamp(23ch, 60%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.visual {
    height: 125px;
    width: 100%;
  }