ذاكرة الوصول العشوائي (RAM) (تكرار، تلقائي، الحد الأدنى الأدنى)

بالنسبة إلى هذا المثال السابع، قم بدمج بعض المفاهيم التي تعلمتها بالفعل لإنشاء تنسيق سريع الاستجابة مع العناصر الفرعية المرنة التي يتم وضعها تلقائيًا. أنيق جدًا. المصطلحات الرئيسية التي يجب تذكّرها هنا هي repeat وauto-(fit|fill) وminmax()، والتي تتذكرها اختصار RAM (ذاكرة الوصول العشوائي).

وتبدو جميعها معًا على النحو التالي:

.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));
}

HTML

<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));
}