Thuộc tính column-count trong CSS
Bùi Tấn Lực - 955
- 16/10/2025
Chức năng của Thuộc tính column-count trong CSS
Thuộc tính column-count trong CSS dùng để chia nội dung ra theo số cột được chỉ định, chiều rộng cột tự động phụ thuộc theo chiều rộng của phần tử cha, có thể quy định thêm khoảng cách giữa các cột và đường viền giữa các cột.
Cú pháp của Thuộc tính column-count trong CSS
column-count: giatri;
giatri: Giá trị là các con số (Ví dụ: 3 hoặc 4)
Code Thuộc tính column-count trong CSS
column-count: 3; Chia nội dung làm 3 cột
column-count: 3; column-gap: 140px; Chia nội dung làm 3 cột, khoảng cách giữa các cột 140px
column-count: 3; column-gap: 140px; column-rule: 1px solid #ccc; Chia nội dung làm 3 cột, khoảng cách giữa các cột 140px, vẽ đường viền màu xám giữa các cột
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính column-count 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;}
</style>
</head>
<body>
<h1>Code Thuộc tính column-count trong CSS</h1>
<p>Chia nội dung ra theo số cột được chỉ định, chiều rộng cột tự động phụ thuộc theo chiều rộng của phần tử cha, có thể quy định thêm khoảng cách giữa các cột và đường viền giữa các cột:</p>
<h4>column-count: 3; Chia nội dung làm 3 cột</h4>
<div class="divcha" style="column-count: 3;">
Hãy Chạy thử Code Thuộc tính column-count 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>
<h4>column-count: 4; Chia nội dung làm 4 cột</h4>
<div class="divcha" style="column-count: 4;">
Hãy Chạy thử Code Thuộc tính column-count 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>
<h4>column-count: 3; column-gap: 140px; Chia nội dung làm 3 cột, khoảng cách giữa các cột 140px</h4>
<div class="divcha" style="column-count: 3; column-gap: 140px;">
Hãy Chạy thử Code Thuộc tính column-count 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>
<h4>column-count: 3; column-gap: 140px; column-rule: 1px solid #ccc; Chia nội dung làm 3 cột, khoảng cách giữa các cột 140px, vẽ đường viền màu xám giữa các cột</h4>
<div class="divcha" style="column-count: 3; column-gap: 140px; column-rule: 1px solid #ccc;">
Hãy Chạy thử Code Thuộc tính column-count 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>
Những lưu ý khi sử dụng column-count trong CSS
column-count giúp chia nội dung thành số lượng cột cố định, nhưng hiệu quả hiển thị còn phụ thuộc vào chiều rộng vùng chứa và cách bố trí các thuộc tính liên quan. Vì vậy, khi áp dụng vào giao diện thực tế, cần cân nhắc khả năng đọc và sự thay đổi kích thước màn hình thay vì chỉ tập trung vào số cột.
column-count ảnh hưởng thế nào đến chiều rộng cột?
Khi đặt column-count, trình duyệt sẽ phân chia chiều rộng của phần tử thành các cột tương ứng. Số cột càng nhiều thì không gian dành cho mỗi cột càng hẹp, đặc biệt khi phần tử có chiều rộng giới hạn.
Chẳng hạn, một khối nội dung rộng 900px nếu chia thành 3 cột sẽ cho không gian đọc thoải mái hơn so với việc chia thành 5 cột. Vì vậy, không nên chọn số cột chỉ dựa trên mong muốn về bố cục mà cần xem xét kích thước thực tế của vùng nội dung.
Với các đoạn văn dài, quá nhiều cột có thể khiến người đọc phải di chuyển mắt liên tục giữa những vùng nội dung hẹp. Trong trường hợp này, giảm số cột hoặc kết hợp với column-gap sẽ giúp bố cục cân đối và dễ đọc hơn.
column-count có phù hợp với bố cục responsive không?
column-count vẫn có thể sử dụng trong thiết kế responsive, nhưng một số lượng cột cố định thường không phù hợp với mọi kích thước màn hình. Bố cục nhiều cột trên màn hình lớn có thể trở nên quá chật khi thu nhỏ xuống điện thoại.
Cách xử lý phổ biến là thay đổi số cột theo từng kích thước màn hình bằng media query. Chẳng hạn, giao diện máy tính có thể sử dụng 3 cột, máy tính bảng giảm xuống 2 cột và màn hình nhỏ chỉ còn 1 cột.
.noidung {
column-count: 3;
}
@media (max-width: 768px) {
.noidung {
column-count: 2;
}
}
@media (max-width: 480px) {
.noidung {
column-count: 1;
}
}
Cách này giúp nội dung duy trì được độ rộng hợp lý thay vì cố ép cùng một số lượng cột trên tất cả thiết bị.
Khi nào nên kết hợp column-count với column-gap?
Nên kết hợp column-count với column-gap khi khoảng cách giữa các cột cần được kiểm soát rõ ràng. Nếu các cột nằm quá sát nhau, ranh giới giữa từng phần nội dung sẽ khó nhận biết và tổng thể trở nên bí.
Ví dụ, khi chia một danh sách hoặc nội dung văn bản thành 3 cột, có thể tạo khoảng trống vừa phải để các cột tách biệt nhưng vẫn giữ được mật độ thông tin cần thiết.
.noidung {
column-count: 3;
column-gap: 30px;
}
Trong thực tế, column-count quyết định số lượng cột, còn column-gap kiểm soát khoảng cách giữa chúng. Kết hợp hai thuộc tính này hợp lý sẽ giúp bố cục nhiều cột cân đối hơn mà không cần tạo thêm nhiều phần tử HTML chỉ để chia nội dung.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính column-count 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 *
