Thuộc tính column-span trong CSS

Thuộc tính column-span cho phép một phần tử (thường là tiêu đề) trải qua toàn bộ các cột trong bố cục đa cột, thay vì bị giới hạn trong một cột đơn lẻ.

Cú pháp

.element {
  column-span: none | all;
}

• none (mặc định): Phần tử nằm trong một cột
• all: Phần tử trải qua tất cả các cột

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      column-count: 4;
      column-rule-color: maroon;
      column-rule-style: dashed;
      column-gap: 30px;
      padding: 20px;
    }
    h1 {
      column-span: all;
      text-align: center;
      color: maroon;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="demo">
    <h1>Đây là tiêu đề trải qua tất cả cột</h1>
    Văn bản nội dung sẽ chia thành 4 cột bên dưới tiêu đề.
    Tiêu đề h1 không bị chia cột mà hiển thị trọn vẹn trên cùng.
    Đây là mẫu phổ biến cho bố cục báo chí, tạp chí.
  </div>
</body>
</html>

Ứng dụng thực tế

.magazine-article {
  columns: 200px 3;
  column-gap: 2rem;
}
.magazine-article h2 {
  column-span: all;
  font-size: 2rem;
  border-bottom: 2px solid #333;
  padding-bottom: 0.5rem;
  margin: 2rem 0 1rem;
}
.magazine-article blockquote {
  column-span: all;
  background: #f5f5f5;
  padding: 1rem;
  border-left: 4px solid #e67e22;
}

Hỗ trợ trình duyệt

Hỗ trợ tốt trên tất cả trình duyệt hiện đại (Chrome 50+, Firefox 52+, Safari 9+, Edge 12+). Cần prefix -webkit-column-span cho Safari cũ.

Lưu ý

• Chỉ hoạt động trên phần tử block-level con trực tiếp của container đa cột
• Phần tử column-span: all sẽ ngắt luồng cột (column break)
• Không thể dùng column-span trên phần tử đã có float hoặc position: absolute