RAM (Ulangi, Otomatis, Minmax)

Untuk contoh ketujuh ini, gabungkan beberapa konsep yang telah Anda pelajari untuk membuat tata letak responsif dengan turunan yang fleksibel dan ditempatkan secara otomatis. Cukup rapi. Istilah kunci yang harus diingat di sini adalah repeat, auto-(fit|fill), dan minmax(), yang Anda ingat dengan akronim RAM.

Jika digabungkan, tampilannya akan terlihat seperti ini:

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

Anda menggunakan repeat() lagi, tetapi kali ini, menggunakan kata kunci auto-fit, bukan nilai numerik eksplisit. Tindakan ini memungkinkan penempatan otomatis elemen turunan tersebut. Turunan ini memiliki nilai minimum dasar 150px dengan nilai maksimum 1fr, artinya pada layar yang lebih kecil, turunan ini akan menggunakan lebar 1fr penuh, dan saat mencapai lebar 150px masing-masing, turunan ini akan mulai mengalir ke garis yang sama.

Dengan auto-fit, semua jalur yang benar-benar kosong akan diciutkan ke 0 dan jalur yang terisi akan bertambah mengikuti ruangnya. Namun, jika Anda mengubahnya menjadi auto-fill, jalur kosong akan menggunakan jumlah ruang yang sama seperti yang digunakan jika diisi:

.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>
  

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