Cột - Thủ thuật CSS | CSS Almanac 2025

Chỉ với một vài quy tắc CSS, bạn có thể tạo một bố cục lấy cảm hứng từ bản in có tính linh hoạt của web. Nó giống như lấy một tờ báo, nhưng khi tờ giấy nhỏ hơn, các cột sẽ tự động điều chỉnh và cân bằng cho phép nội dung trôi chảy một cách tự nhiên.

.intro ( columns: 300px 2; )

Các columnsbất động sản sẽ chấp nhận column-count, column-widthhoặc cả hai đặc tính.

columns: || ;

Sử dụng cả hai column-countvà column-widthđược khuyến nghị để tạo bố cục nhiều cột linh hoạt. Các column-countsẽ hoạt động như số lượng tối đa cột, trong khi column-widthsẽ quyết định chiều rộng tối thiểu cho mỗi cột. Bằng cách kéo các thuộc tính này lại với nhau, bố cục nhiều cột sẽ tự động chia nhỏ thành một cột duy nhất ở độ rộng trình duyệt hẹp mà không cần truy vấn phương tiện hoặc các quy tắc khác.

Bố cục nhiều cột hoạt động tốt trên các phần tử khối bao gồm danh sách để tạo điều hướng linh hoạt.

Để tinh chỉnh thêm bố cục nhiều cột của bạn, hãy sử dụng break-insidetrên các phần tử cụ thể để giúp chúng không bị kẹt giữa các cột.