Ví dụ CSS Grid Bài 11: Auto-fit và Auto-fill

Khi khai báo một grid, chúng ta có thể khai báo các thuộc tính grid-template-columns và grid-template-rows hoặc không.

Nếu bạn không khai báo thì trình duyệt sẽ tự động sử dụng thuật toán sắp xếp tự động của grid để sắp xếp các phần tử.

Nếu chúng ta khai báo thì ngoài cách khai báo từng cột từng hàng thì chúng ta có hàm repeat(). Và hôm nay chúng ta học thêm hàm auto-fit và hàm auto-fill để tạo hiển thị tốt hơn khi người dùng thay đổi kích thước màn hình sử dụng.

Để hiểu rõ cách auto-fit (tự động điều chỉnh), và auto-fill (tự động điền) hoạt động, trước tiên chúng ta tạo các khối html như sau:

<div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

<div class="wrapper2">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>  
</div>

Sử dụng hàm auto-fill trong Grid

Chúng ta sẽ CSS cho hàm này như trong demo:

(Tôi đã comment  đoạn chưa cần thiết lại để chỉ tập trung vào hàm auto-fit)

(Mở trong codepen và kéo thay đổi kích thước trình duyệt để thấy sự thay đổi)

Trong đoạn code này tôi đã khai báo grid-template-columns: repeat(auto-fill, minmax(200px,1fr));. Tức là tự động điền các ô có chiều rộng nhỏ nhất là 200px và lớn nhất là 1fr (Tìm hiểu đơn vị fr).

Khi không có phần tử nào để lấp đầy khoảng trống thì nó vẫn sẽ tạo ra ô lưới với kích thước là minmax(200px, 1fr).

(Ví dụ thêm về việc sử dụng auto-fill)

Với hàm auto-fit (tự động điều chỉnh sẽ khác)

Sử dụng hàm auto-fit trong Grid

Chúng ta có code demo:

(Mở trong codepen và kéo thay đổi kích thước trình duyệt để thấy sự thay đổi)

Ở đây tôi cũng khai báo hàm auto-fit (tự động điều chỉnh) các ô với chiều rộng nhỏ nhất là 200px, lớn nhất là 1fr.

Ở đây nó không tự động tạo thêm các ô lưới mà tự động điều chỉnh lưới chứa các item để phù hợp với kích thước màn hình (khi bị thay đổi)

(Ví dụ thêm về việc sử dụng auto-fit)

Hãy thử thay đổi các giá trị và thêm các iitem để hiểu rõ hơn.

Vậy là chúng ta đã tìm hiểu xong về cách auto-fit và auto-fill hoạt động. Tùy trường hợp chúng ta có thể áp dụng cách làm khác nhau.

NOTE: Hãy thử thay đổi ít nhất 7 phiên bản khác nhau trước khi sang bài tiếp theo.

Bài tiếp theo: Ví dụ CSS Grid Bài 12: Luyện tập hàm repeat