Thuộc tính column-width trong CSS

Thuộc tính column-width chỉ định chiều rộng tối thiểu (không phải cố định) cho mỗi cột trong bố cục đa cột. Trình duyệt sẽ tạo bao nhiêu cột vừa vặn với chiều rộng container.

Cú pháp

.element {
  column-width: <length> | auto;
}

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      column-count: 4;
      column-rule-color: gray;
      column-rule-style: dashed;
      column-width: 100px;
      column-gap: 30px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="demo">
    Văn bản này sẽ được chia thành các cột với chiều rộng tối thiểu 100px.
    Số cột thực tế phụ thuộc vào chiều rộng của container.
    Nếu container rộng, sẽ có nhiều cột hơn (tối đa 4 cột do column-count).
    Nếu container hẹp, số cột sẽ giảm xuống.
  </div>
</body>
</html>

Sự khác biệt: column-width vs column-count

Khi nào dùng column-width?

• Muốn bố cục tự động thích ứng màn hình (responsive)
• Văn bản dài cần đọc dễ dàng trên mobile/desktop
• Kết hợp với column-count để giới hạn tối đa số cột

Mẹo: Responsive columns không cần media query

.article {
  columns: 250px 3; /* Tối đa 3 cột, mỗi cột tối thiểu 250px */
  column-gap: 2rem;
}

Trên mobile: 1 cột. Tablet: 2 cột. Desktop lớn: 3 cột. Tự động!