Thuộc tính column-span trong CSS
Bùi Tấn Lực - 909
- 16/10/2025
Chức năng của Thuộc tính column-span trong CSS
Thuộc tính column-span trong CSS dùng để quy định phần tử HTML trải rộng qua tất cả các cột (bỏ qua sự phân chia cột) hoặc chịu theo sự phân chia cột.
Cú pháp của Thuộc tính column-span trong CSS
column-span: giatri;
giatri: Giá trị để quy định phần tử HTML trải rộng qua tất cả các cột (bỏ qua sự phân chia cột) hoặc chịu theo sự phân chia cột (Ví dụ: all, none)
Các giá trị của Thuộc tính column-span trong CSS
all: Giúp phần tử HTML trải rộng qua tất cả các cột, bỏ qua sự phân chia cột.
none: Quy định phần tử HTML chịu theo sự phân chia cột.
Code Thuộc tính column-span trong CSS
column-span: all; Giúp phần tử HTML trải rộng qua tất cả các cột, bỏ qua sự phân chia cột
column-span: none; Quy định phần tử HTML chịu theo sự phân chia cột
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính column-span trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{width:100%; height:auto; margin-bottom:10px; column-count: 3; column-gap: 40px; column-rule-style: solid; column-rule-color: #ff0000; column-rule-width: 5px;}
</style>
</head>
<body>
<h1>Code Thuộc tính column-span trong CSS</h1>
<p>Dùng để quy định phần tử HTML trải rộng qua tất cả các cột (bỏ qua sự phân chia cột) hoặc chịu theo sự phân chia cột:</p>
<h2>Chưa dùng column-span</h2>
<div class="divcha" >
<h3>Code Thuộc tính column-span trong CSS</h3>
Hãy Chạy thử Code Thuộc tính column-span trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả, Hãy Chạy thử Code Thuộc tính column-span trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả.
</div>
<h2>column-span: all; Giúp phần tử HTML trải rộng qua tất cả các cột, bỏ qua sự phân chia cột</h2>
<div class="divcha" >
<h3 style="column-span: all;">Code Thuộc tính column-span trong CSS</h3>
Hãy Chạy thử Code Thuộc tính column-span trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả, Hãy Chạy thử Code Thuộc tính column-span trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả.
</div>
<h2>column-span: none; Quy định phần tử HTML chịu theo sự phân chia cột</h2>
<div class="divcha" >
<h3 style="column-span: none;">Code Thuộc tính column-span trong CSS</h3>
Hãy Chạy thử Code Thuộc tính column-span trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả, Hãy Chạy thử Code Thuộc tính column-span trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả.
</div>
</body>
</html>
Ứng dụng column-span trong bố cục nội dung nhiều cột
Khi nội dung được chia thành nhiều cột, column-span giúp một phần tử có thể thoát khỏi cấu trúc cột và trải rộng theo chiều ngang của toàn bộ vùng nội dung. Cách sử dụng này đặc biệt phù hợp với tiêu đề, phần giới thiệu hoặc một nội dung cần tạo điểm nhấn trước khi các đoạn văn tiếp tục được phân bổ thành nhiều cột.
Tạo tiêu đề nổi bật trải rộng toàn bộ các cột
Một trong những cách dùng thực tế của column-span là đặt tiêu đề nằm trên toàn bộ hệ thống cột thay vì để tiêu đề bị giới hạn trong một cột riêng. Với giá trị all, phần tử có thể trải qua tất cả các cột mà phần tử cha đang tạo ra.
.noidung {
column-count: 3;
}
.noidung h2 {
column-span: all;
}
Cách này giúp tiêu đề tạo thành một điểm ngắt thị giác rõ ràng, sau đó nội dung bên dưới mới tiếp tục được phân chia theo số cột đã thiết lập. Đây là lựa chọn phù hợp khi muốn bố cục giống một trang tạp chí hoặc một khu vực nội dung có tính trình bày cao.
Kết hợp column-span với các thuộc tính chia cột khác
column-span không thay thế các thuộc tính điều khiển cột mà hoạt động cùng chúng. Có thể kết hợp với column-count để xác định số cột, column-gap để tạo khoảng cách và column-width để định hướng chiều rộng mong muốn của từng cột.
Điểm cần lưu ý là column-span chỉ quyết định cách phần tử vượt qua hệ thống cột; nó không quyết định số lượng hay khoảng cách giữa các cột. Vì vậy, nên thiết lập phần chia cột ở phần tử cha trước, sau đó dùng column-span cho những thành phần thực sự cần trải rộng.
Những trường hợp nên và không nên sử dụng column-span
Nên sử dụng column-span khi một tiêu đề hoặc nội dung quan trọng cần tạo sự tách biệt với phần văn bản nhiều cột phía dưới. Cách này giúp bố cục dễ theo dõi hơn mà không cần tạo thêm một vùng HTML riêng chỉ để đặt tiêu đề.
Ngược lại, không nên lạm dụng thuộc tính này cho quá nhiều phần tử. Việc liên tục phá vỡ dòng chảy của các cột có thể khiến bố cục mất tính liền mạch và khó kiểm soát. Với những nội dung đơn giản chỉ cần hiển thị theo một cột, việc sử dụng column-span không mang lại lợi ích đáng kể.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính column-span trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
