CSS Grid Lanes

• Một tính năng CSS mới Grid Lanes để triển khai bố cục masonry trên web đã được giới thiệu trong Safari Technology Preview 234
• Có thể xây dựng lưới phản hồi không cần media query bằng thuộc tính display: grid-lanes, đồng thời định nghĩa các cột linh hoạt với grid-template-columns
• Thuộc tính item-tolerance cho phép điều chỉnh độ nhạy khi sắp xếp các mục, giúp giảm mất cân đối thị giác do khác biệt kích thước nội dung
• Hỗ trợ cả hướng cột và hướng hàng, luồng sẽ được quyết định tự động tùy theo việc định nghĩa grid-template-columns hay grid-template-rows
• CSS Working Group đang thảo luận một số tên thuộc tính chi tiết, và đội ngũ WebKit đang song song chuẩn hóa và triển khai để khuyến khích các nhà phát triển thử nghiệm

---

Tổng quan về CSS Grid Lanes

• Grid Lanes là một chế độ hiển thị mới để triển khai bố cục kiểu masonry trên web bằng CSS thuần
  • Dùng display: grid-lanes để cấu hình với cú pháp tương tự grid hiện có
  • grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) tạo các cột linh hoạt với độ rộng tối thiểu 250px
• Dùng thuộc tính gap để chỉ định khoảng cách giữa các mục, và có thể thích ứng với mọi kích thước màn hình mà không cần media query
• Có thể thử nghiệm trong Safari Technology Preview 234, WebKit cũng cung cấp trang demo

Cách Grid Lanes hoạt động

• Trình duyệt sẽ tự động đặt từng mục vào cột gần phía trên nhất
  • Tương tự Masonry.js, mục tiếp theo sẽ được thêm vào cột hiện đang ngắn nhất
  • Khi di chuyển bằng phím Tab, người dùng có thể duyệt nội dung đang hiển thị theo chiều ngang
• Khi nạp nội dung cuộn vô hạn, việc sắp xếp tự động vẫn có thể thực hiện mà không cần JavaScript

Các khả năng mở rộng của CSS Grid

• Đa dạng kích thước lane: cú pháp grid-template-* cho phép xen kẽ cột hẹp và cột rộng
  • Ví dụ: grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr)
• Hỗ trợ mở rộng mục (span)
  • Có thể đặt một mục trải qua nhiều cột (grid-column: span 4 v.v.)
  • Demo ví dụ: bố cục dạng bài báo
• Có thể định vị tường minh
  • Ví dụ: header { grid-column: -3 / -1; } để cố định header ở các cột cuối

Tính năng chuyển hướng

• Hỗ trợ cả bố cục dựa trên cột (waterfall) lẫn dựa trên hàng (brick)
  • Khi định nghĩa grid-template-columns thì tự động đặt theo hướng cột, còn khi định nghĩa grid-template-rows thì tự động đặt theo hướng hàng
• grid-auto-flow: normal là giá trị mặc định, và hệ thống sẽ tự quyết định dựa trên hướng đã định nghĩa
• CSS Working Group đang thảo luận tên gọi của các thuộc tính điều khiển luồng (như grid-lanes-direction)
  • Các thảo luận liên quan đang diễn ra trong issue của GitHub CSSWG-drafts

Điều chỉnh độ nhạy sắp xếp: item-tolerance

• item-tolerance quyết định mức độ phân biệt nghiêm ngặt về chênh lệch kích thước khi sắp xếp các mục
  • Giá trị mặc định là 1em, các chênh lệch nhỏ hơn mức này sẽ được xem là cùng chiều cao
  • Giá trị càng cao thì các mục dịch trái phải ít hơn, còn càng thấp thì điều chỉnh vị trí chi tiết hơn
• Về mặt khả năng tiếp cận, cần đặt giá trị phù hợp để giảm thiểu bước nhảy thị giác khi di chuyển bằng Tab
• Tên thuộc tính hiện được định nghĩa là item-tolerance, nhưng có thể đổi thành flow-tolerance hoặc pack-tolerance

Ví dụ thử nghiệm và ứng dụng

• Safari Technology Preview 234 cung cấp nhiều demo
  • Thư viện ảnh, bài viết kiểu báo, website bảo tàng, bố cục mega menu v.v.
• Mã ví dụ:

  .container {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
    column-gap: 4lh;
  }
  

• Không chỉ hữu ích cho hình ảnh mà còn phù hợp với footer hoặc menu có nhiều liên kết

Kế hoạch sắp tới

• CSS Working Group đang tiếp tục quyết định các tên thuộc tính còn lại
• Đội ngũ WebKit đã song song triển khai và chuẩn hóa từ giữa năm 2022
• Khuyến khích các nhà phát triển tạo demo và gửi phản hồi
  • Jen Simmons đang thu thập ý kiến qua Bluesky và Mastodon
• Cú pháp cơ bản đã ổn định, sẵn sàng để chuẩn bị áp dụng vào các dự án thực tế

[shakespeares]

Vậy thì lại phải dùng riêng Grid-lanes cho Safari và grid cho Firefox đúng không. Làm ơn chuẩn hóa theo web standards một chút đi...

[GN⁺]

Ý kiến trên Hacker News

• Xin dành một tràng pháo tay cho đội Safari. Việc họ bất ngờ vươn lên đứng đầu bảng xếp hạng Interop 2025 vào tháng 10 thực sự rất đáng kinh ngạc

  • Tôi đã cảm nhận rõ rằng kể từ iOS 26, Safari nhận được một đợt cập nhật tính năng web rất lớn. Không chỉ có WebGPU, mà cả những phần còn thiếu của OPFS API cũng đã được bổ sung, nên giờ đã có thể dùng trong thực tế. Ngoài ra còn thêm cả thuộc tính CSS field-sizing, giải quyết vấn đề ô nhập văn bản tự động nở ra theo nội dung nhập
  • Safari thường được khen là “trình duyệt tốt nhất” mỗi khi có bản phát hành lớn, nhưng ngoài những thời điểm đó thì lại hay bị chỉ trích. Tôi nghĩ là vì các trình duyệt khác cập nhật liên tục, còn Safari thì đi theo chu kỳ phát hành truyền thống
  • Thật ra cũng không có gì đáng ngạc nhiên. Tôi đã theo dõi đội Safari đều đặn tung ra các tính năng HTML và CSS mới trong vài năm nay
  • Trong lúc đội Chrome quảng bá các tính năng thử nghiệm như WebPCIe, Safari lại cung cấp những tính năng người dùng thực sự muốn. Chẳng hạn như đã hỗ trợ các hiệu ứng nền mờ từ sớm hơn rất nhiều
  • Tuy vậy, việc Safari vẫn chưa hỗ trợ wasm 64-bit vẫn là điều đáng tiếc. Danh sách tính năng WebAssembly ghi là “hỗ trợ 100%”, nhưng trên thực tế vẫn thiếu những phần quan trọng

• Mong là tính năng CSS Gap Decorations sớm ra mắt. Tôi đã chán ngấy việc phải tiếp tục dùng những mẹo vá víu không cần thiết chỉ để tạo các đường viền đẹp giữa các item flex hoặc grid

  • Có người đề xuất thử dùng bảng. Nó thực ra đã tốt hơn trước rất nhiều rồi, nhưng chúng ta vẫn luôn muốn nhiều hơn nữa. Có lẽ con người vốn là loài chẳng bao giờ biết hài lòng

• Gần đây tôi dùng layout Masonry trong một dự án, hiệu năng thì ổn nhưng vì dựa trên absolute positioning nên khá là chắp vá. Phải biết trước tỷ lệ khung hình của đối tượng, và khi resize thì phải tính lại. Vì thế tôi rất mong sớm có hỗ trợ native

  • Tôi cũng thấy vậy. Tôi đang chờ CSS giải quyết vấn đề này, và chờ đến ngày có thể gỡ bỏ 1.3KB JavaScript cuối cùng khỏi trang chủ của mình từ năm 2019. Xin cảm ơn tất cả những ai đang tạo ra tính năng này

• Những công bố kiểu này rất hay, nhưng cũng có gì đó như một màn hài kịch bi thảm. Vì Apple không cập nhật trình duyệt một cách liên tục, nên phải rất lâu sau mới tới thời điểm có thể thật sự tin tưởng và dùng các tính năng mới này

• Layout Masonry nhìn thì đẹp, nhưng tôi thấy nó khiến việc nắm được toàn bộ hình ảnh chỉ trong một cái nhìn trở nên khó hơn

  • Phần lớn cái gọi là “thiết kế” web tập trung vào diện mạo hơn là tính khả dụng. Hầu như chẳng ai thực sự dùng sản phẩm, họ chỉ xem hoạt ảnh cuộn rồi bảo “trông ngầu đấy”
  • Nếu tất cả ảnh đều nằm ngang hoặc đều thẳng đứng thì ổn, nhưng nếu trộn lẫn thì layout sẽ thành ra lộn xộn

• Tôi thắc mắc tại sao lại không gọi nó là Masonry. Dù vậy, cái tên grid-lanes cũng mang tính mô tả nên khá dễ hiểu

• Tôi tò mò không biết các LLM sẽ mất bao lâu để học chính xác cú pháp CSS mới kiểu này

• Nếu phải nhìn một trang web làm từ lưới văn bản với kích thước và vị trí tùy ý, tôi thà bị ai đó bắn cho xong
  Ảnh demo lưới kiểu báo

  • Bạn chưa từng đọc báo à?
  • Tôi lại nghĩ kiểu thiết kế này khá hay. Có thể triển khai trên web một bố cục bất đối xứng nhưng hiệu quả như báo in
  • Nhưng tôi cảm thấy nó vi phạm các nguyên tắc cơ bản của thiết kế là căn chỉnh và nhóm nội dung
  • Buồn cười là tôi lại thấy nó cực kỳ ngầu
  • NYTimes.com là ví dụ hiện lên ngay trong đầu

• Cá nhân tôi ghét layout dạng lane. Rất khó xem tuần tự mọi phần tử trong danh sách, mắt cứ phải nhảy lên xuống nên gây mệt mỏi nhận thức khá lớn

  • Nhưng nếu không cần xem xét mọi phần tử một cách có hệ thống thì layout lane cũng ổn. Nó phù hợp với các site kiểu như Pinterest, nơi người ta hấp thụ nội dung chỉ bằng một cái nhìn tổng thể
  • Nhìn thì đẹp nhưng khi dùng sâu thì là một layout khá bất tiện
  • Mục tiêu không phải là hiệu quả, mà là để người xem thấy toàn cảnh ngay lập tức. Giống như báo giấy hoặc thư viện ảnh
  • Trớ trêu là tính năng này xuất hiện đúng lúc trào lưu ấy sắp qua đi. Về UX thì không mấy tốt, nhưng về mặt thị giác thì đẹp
  • Mang cảm giác thiết kế thiên về não phải. Hợp với các site như Pinterest hoặc Home Assistant

• Tôi nghĩ Apple nên cho phép tải Safari một cách ổn định trên mọi nền tảng

  • Tôi còn nhớ từng cài Safari trên Windows XP. Có vẻ kể từ thất bại đó đến nay vẫn chưa đủ lâu
  • Nhưng có lẽ gián tiếp thì vẫn làm được. Trình duyệt mới của Kagi đang dùng WebKit, hiện mới chỉ có trên macOS nhưng rồi cũng sẽ có phiên bản Windows