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

Bài trước các bạn đã được giới thiệu qua về hàm repeat, hôm nay chúng ta sẽ tìm hiểu rõ hơn và cách kết hợp hàm repeat với các hàm khác để tạo bố cục tự động.

Cú pháp hàm repeat là repeat(), hàm này sẽ lặp lại một giá trị nào đó được định nghĩa bên trong ngoặc (). Chúng ta sẽ vào trong ví dụ ngay.

Hàm repeat kết hợp với auto-fill

Demo code:

Trong ví dụ này tôi đã sử dụng hàm repeat() như sau:

grid-template-columns: repeat(auto-fill, 100px 200px);

Hàm này có nghĩa như sau: Lặp lại các ô lưới có kích thước 100px và 200px theo cột, kết hợp auto-fill để tự động điền nếu còn khoảng trống có thể chứa 2 cột (100px + 200px).

Tuy nhiên, ví dụ này tôi tạo 12 item nên chỉ có trên một số màn hình rộng mới rõ việc auto fill hoạt động.

Hàm repeat kết hợp auo-fill và minmax

Demo code:

Ở đây tôi sử dụng repeat() kết hợp với auto-fill và minmax.

Đoạn này có nghĩa như sau: Lặp lại các ô có kích thước nhỏ nhất là 100px và ô có chiều rộng nhỏ nhất là 100px, lớn nhất là 1fr theo cột. Sử dụng auto-fill để tự động tạo ra các lưới chứa item.

Hàm repeat kết hợp auo-fit và minmax

Trong ví dụ trên, các bạn thử thay đổi hàm auto-fill (tự động điền) bằng hàm auto-fit (tự động điều chỉnh) để thấy sự khác biệt.

Sử dụng hàm auto-fit thì có các ô được khai báo giá trị tùy chỉnh như minmax(100px, 1fr ) thì khi thay đổi kích thước màn hình. Các ô đó sẽ tự động điều chỉnh chiều rộng để lấp đầy khoảng trống.

*Lưu ý:

Chúng ta có thể sử dụng name grid lines (tên các dòng lưới) như: [col] <kích thước> hoặc [row] <kích thước> khi định nghĩa kích thước của cột và hàng (Ví dụ: [col] 100px).

Chúng ta vẫn có thể định vị tất cả các ô hoặc định vị một phần + một phần tự động

Vậy là bạn đã hiểu rõ về 3 hàm cơ bản: hàm repeat(), auto-fill và auto-fit. Dựa vào 3 hàm này bạn đã có thể thiết kế bố cục responsive chỉ bằng 1 dòng css.

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 13: Grid trong Grid