Xuất bản: Ngày 14 tháng 1 năm 2026
Kể từ Chrome 145, các thuộc tính column-wrap và column-height trong thông số kỹ thuật bố cục nhiều cột cấp độ 2 được hỗ trợ.
Các thuộc tính này cho phép bạn chuyển các cột sang một hàng mới theo hướng khối.
Trước Chrome 145, nếu chiều cao của vùng chứa nhiều cột bị hạn chế, thì nội dung không vừa với không gian có sẵn sẽ xuất hiện dưới dạng các cột tràn theo hướng nội tuyến. Thao tác này sẽ tạo một thanh cuộn ngang trên web.
Với các thuộc tính column-height và column-wrap, bạn có thể đặt chiều cao cho hàng cột và đặt các cột tràn xuất hiện dưới dạng một hàng mới.
Khả năng tạo các hàng cột mới giúp bạn giải quyết tình huống hiện tại, trong đó bạn phải lựa chọn giữa việc khiến mọi người phải di chuyển lên và xuống để đọc các cột hoặc chấp nhận thanh cuộn ngang trong trường hợp có một lượng nội dung không thể dự đoán được.
Thao tác này cũng cho phép các mẫu như băng chuyền theo hướng khối, trong đó các cột được tạo để lấp đầy chiều cao khung hiển thị có sẵn. Để đọc hàng cột tiếp theo, bạn di chuyển đến màn hình tiếp theo theo hướng khối.
Tạo trải nghiệm đọc rõ ràng
Với nhiều hàng cột, bạn có thể tạo ra trải nghiệm đọc không rõ ràng, trong đó độc giả không nhận thấy có nhiều hàng và họ bỏ qua khoảng trống để tiếp tục đọc xuống cột. Đây là điều bạn cần cân nhắc khi thiết kế giao diện người dùng. Khả năng sắp tới để thêm thành phần trang trí vào khoảng cách giữa các hàng sẽ cung cấp cho bạn một công cụ bổ sung để tạo sự khác biệt về hình ảnh này.
Các quy tắc về hàng sắp ra mắt
Quy cách cấp 1 nhiều cột bao gồm các thuộc tính để tạo kiểu cho một column-rule; quy tắc này được đặt trong khoảng trống giữa các cột. Các thuộc tính để tạo kiểu cho quy tắc hàng được đưa vào quy cách Trang trí khoảng trống CSS mới. Quy cách này hiện đang trong giai đoạn dùng thử dành cho nhà phát triển. Sau khi tính năng này ổn định, bạn có thể thêm các quy tắc về hàng và cột trong lưới, flexbox và multicol.