Thuộc tính columns - Rút gọn cho đa cột trong CSS

Thuộc tính columns là shorthand (rút gọn) kết hợp column-width và column-count để tạo bố cục đa cột (multi-column layout) cho văn bản.

Cú pháp

.element {
  columns: <column-width> <column-count>;
}

Ví dụ minh họa

Tạo 4 cột với chiều rộng tối thiểu 100px mỗi cột:

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      column-rule-color: gray;
      columns: 100px 4;
      column-rule-style: dashed;
      column-gap: 30px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="demo">
    Đây là văn bản demo để minh họa thuộc tính columns trong CSS. 
    Văn bản sẽ tự động chia thành nhiều cột dựa trên chiều rộng container.
    Thuộc tính columns là cách nhanh nhất để tạo bố cục báo chí, tạp chí.
    Bạn có thể điều khiển số cột tối đa và chiều rộng tối thiểu cùng lúc.
  </div>
</body>
</html>

Các thuộc tính liên quan

Thuộc tính	Mô tả
`column-count`	Số cột tối đa
`column-width`	Chiều rộng tối thiểu của mỗi cột
`column-gap`	Khoảng cách giữa các cột
`column-rule`	Đường phân cách giữa cột (shorthand)
`column-span`	Cho phép phần tử trải qua nhiều cột

Lưu ý quan trọng

Trình duyệt sẽ tự động giảm số cột nếu container quá hẹp
Chiều rộng cột thực tế có thể lớn hơn column-width để lấp đầy container
Phù hợp cho văn bản dài (bài báo, blog), không phù hợp cho layout phức tạp