रैम (दोहराएं, अपने-आप, कम से कम सबसे ज़्यादा)

इस सातवें उदाहरण के लिए, अपने-आप डाले गए और लचीले बच्चों के हिसाब से एक रिस्पॉन्सिव लेआउट बनाने के लिए, आपके सीखे हुए सिद्धांतों में से कुछ को जोड़ें. बहुत बढ़िया. यहां याद रखने वाले मुख्य शब्द repeat, auto-(fit|fill), और minmax() हैं, जिन्हें आपको संक्षिप्त रूप में रैम के तौर पर याद है.

सब कुछ एक साथ, ऐसा लगता है:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

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

auto-fit का इस्तेमाल करने पर, कोई भी पूरी तरह से खाली ट्रैक 0 में छोटा हो जाएगा. साथ ही, भरे गए ट्रैक अपनी जगह का इस्तेमाल करने लगेंगे. हालांकि, अगर इसे auto-fill में बदला जाता है, तो खाली ट्रैक भरे जाने पर वे उतनी ही जगह लेंगे जितने वे खाली करेंगे:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

एचटीएमएल

<div class="parent white">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  

CSS

        .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}