رم (تکرار، خودکار، حداقل حداکثر)

برای این مثال هفتم، برخی از مفاهیمی را که قبلاً در مورد آنها آموخته‌اید ترکیب کنید تا یک طرح‌بندی پاسخگو با کودکانی که به طور خودکار قرار می‌گیرند و انعطاف‌پذیر ایجاد کنید. بسیار تمیز. عبارات کلیدی که در اینجا باید به خاطر بسپارید عبارتند از 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));
}