Cách CSS Masonry giúp bạn "xếp gạch" tự động và thoát cảnh cài thêm thư viện JS cồng kềnh

Cái thời dùng thư viện để làm layout Pinterest sắp qua rồi!

Nếu bạn từng thử làm một giao diện kiểu "tổ ong" giống Pinterest, chắc chắn bạn đã nếm trải cái cảnh ngồi loay hoay với mấy thư viện JavaScript (JS) như Isotope hay Masonry.js. Dù chúng xịn thật đấy, nhưng việc phải tải thêm một đống code chỉ để xếp mấy cái ảnh cho ngay ngắn thì đúng là cực hình về hiệu suất. Tin vui cho anh em Frontend là chúng ta sắp có CSS Masonry bản gốc, giúp xử lý mọi thứ ngay trong CSS mà không cần tốn một dòng JS nào.

Cuộc chiến "ngầm" giữa Chrome và Firefox về cách triển khai

Dù ai cũng muốn có Masonry, nhưng các ông lớn trình duyệt lại đang cãi nhau xem nên đưa nó vào CSS như thế nào. Firefox và Webkit thì muốn tích hợp Masonry vào trong display: grid, kiểu như là một tính năng mở rộng của Grid. Trong khi đó, nhóm Chrome lại muốn tách nó ra hẳn thành một kiểu hiển thị riêng gọi là display: masonry để tối ưu hóa hiệu suất và tránh làm rối loạn logic của Grid vốn đã rất phức tạp.

Tại sao bạn cần quan tâm? Vì cách triển khai khác nhau sẽ ảnh hưởng đến việc chúng ta viết code sau này. Tuy nhiên, dù thắng thua thế nào, cái đích cuối cùng vẫn là giúp chúng ta thoát cảnh lạm dụng thư viện. Nếu bạn đã từng đọc qua Cách Bento Grid giúp giao diện "vạn người mê", bạn sẽ thấy Masonry chính là mảnh ghép còn thiếu để làm cho UI trở nên linh hoạt và "nghệ" hơn rất nhiều.

Triển khai thử CSS Masonry: Dễ đến mức bất ngờ

Dưới đây là cách mà chúng ta kỳ vọng sẽ được sử dụng rộng rãi trong tương lai gần. Bạn chỉ cần định nghĩa container và để trình duyệt tự lo phần còn lại. Thay vì ngồi tính toán pixel, bạn chỉ việc ra lệnh cho các cột tự động lấp đầy khoảng trống.

.container {
  display: grid;
  gap: 1rem;
  /* Đây là phép thuật này */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: masonry;
}

Trong đoạn mã trên, dòng grid-template-rows: masonry chính là chìa khóa. Nó bảo trình duyệt rằng: "Này, đừng ép các hàng phải cao bằng nhau, cứ cái nào xong thì xếp cái tiếp theo lên luôn đi!". Kết quả là bạn có một giao diện mượt mà, tự động thích ứng với mọi kích thước màn hình mà không cần đến Media Queries phức tạp.

Khi nào thì chúng ta thực sự được dùng?

Hiện tại, CSS Masonry vẫn đang nằm trong bản thảo (draft) và chỉ mới hỗ trợ dưới dạng thử nghiệm trên một số trình duyệt. Nhưng đừng vì thế mà ngó lơ nó. Việc hiểu trước các công nghệ mới này giúp bạn có tư duy thiết kế tốt hơn, nhất là khi kết hợp với Cách CSS Container Queries giúp component "tự nhận thức" để tạo ra những bộ UI thực sự thông minh.

Thay vì ngồi chờ đợi, bạn có thể bắt đầu vọc vạch thử trên các bản trình duyệt dành cho nhà phát triển để xem nó "bay" như thế nào. Liệu Masonry có thay thế hoàn toàn được các giải pháp JS hiện nay hay không? Câu trả lời nằm ở tốc độ thống nhất giữa các ông lớn trình duyệt trong vài tháng tới.

Bạn có thể theo dõi tiến độ chính thức của tính năng này tại tài liệu MDN về Masonry để không bỏ lỡ ngày nó chính thức cập bến nhé.