RAM (Lặp lại, Tự động, Tối đa)

Trong ví dụ thứ 7 này, hãy kết hợp một số khái niệm bạn đã tìm hiểu để tạo bố cục thích ứng với các thành phần con linh hoạt được đặt tự động. Khá rõ ràng. Các thuật ngữ chính cần nhớ ở đây là repeat, auto-(fit|fill) và minmax(). Bạn sẽ nhớ các thuật ngữ này theo từ viết tắt RAM.

Tất cả cùng sẽ trông giống như:

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

Bạn đang sử dụng lại repeat(), nhưng lần này sử dụng từ khoá auto-fit thay vì giá trị số rõ ràng. Thao tác này sẽ bật tính năng tự động định vị các phần tử con này. Các phần tử con này có giá trị tối thiểu cơ bản là 150px với giá trị tối đa là 1fr, nghĩa là trên các màn hình nhỏ hơn, chúng sẽ chiếm toàn bộ chiều rộng 1fr và khi đạt chiều rộng 150px, các phần tử con này sẽ bắt đầu tràn vào cùng một dòng.

Với auto-fit, mọi bản nhạc trống hoàn toàn sẽ thu gọn về 0 và các bản nhạc đã lấp đầy sẽ tăng lên và chiếm dung lượng của chúng. Tuy nhiên, nếu bạn thay đổi thuộc tính này thành auto-fill, các bản nhạc trống sẽ chiếm cùng một dung lượng khi được lấp đầy:

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