Thuộc tính column-width trong CSS
Bùi Tấn Lực - 905
- 16/10/2025
Chức năng của Thuộc tính column-width trong CSS
Thuộc tính column-width trong CSS dùng để quy định chiều rộng tối thiểu của mỗi cột, số cột sẽ được chia dựa vào chiều rộng tối thiểu của mỗi cột và chiều rộng của phần tử cha, nếu chiều rộng của phần tử cha nhỏ hơn chiều rộng tối thiểu được chỉ định hoặc nhỏ hơn 2 cột tối thiểu thì sẽ chia thành 1 cột.
Cú pháp của Thuộc tính column-width trong CSS
column-width: giatri;
giatri: Giá trị để quy định chiều rộng tối thiểu của mỗi cột (Ví dụ: 200px, 100px,....)
Code Thuộc tính column-width trong CSS
column-width: 200px; Chiều rộng tối thiểu của mỗi cột là 200px
column-width: auto; Chiều rộng tối thiểu của mỗi cột là auto
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính column-width 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-width trong CSS</h1>
<p>Quy định chiều rộng tối thiểu của mỗi cột, số cột sẽ được chia dựa vào chiều rộng tối thiểu của mỗi cột và chiều rộng của phần tử cha, nếu chiều rộng của phần tử cha nhỏ hơn chiều rộng tối thiểu được chỉ định hoặc nhỏ hơn 2 cột tối thiểu thì sẽ chia thành 1 cột:</p>
<h4>column-width: 200px; Chiều rộng tối thiểu của mỗi cột là 200px</h4>
<div class="divcha" style="column-width: 200px;">
Hãy Chạy thử Code Thuộc tính column-width 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-width: 300px; Chiều rộng tối thiểu của mỗi cột là 300px</h4>
<div class="divcha" style="column-width: 300px;">
Hãy Chạy thử Code Thuộc tính column-width 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-width: 900px; Chiều rộng tối thiểu của mỗi cột là 900px</h4>
<div class="divcha" style="column-width: 900px;">
Hãy Chạy thử Code Thuộc tính column-width 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-width: auto; Chiều rộng tối thiểu của mỗi cột là auto</h4>
<div class="divcha" style="column-width: auto;">
Hãy Chạy thử Code Thuộc tính column-width 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>
Cách column-width quyết định số cột trong CSS
Khi sử dụng column-width, bạn không trực tiếp yêu cầu trình duyệt phải tạo một số lượng cột cố định. Thay vào đó, thuộc tính này đưa ra chiều rộng mong muốn cho mỗi cột, còn số cột thực tế sẽ được tính dựa trên không gian mà phần tử chứa đang có.
Vì vậy, cùng một giá trị column-width nhưng khi đặt trên các phần tử có chiều rộng khác nhau, kết quả hiển thị có thể không giống nhau.
column-width và chiều rộng phần tử cha
Chiều rộng của phần tử chứa có ảnh hưởng trực tiếp đến số cột mà trình duyệt có thể bố trí. Phần tử càng rộng thì càng có nhiều khả năng chứa được nhiều cột với kích thước mong muốn.
Chẳng hạn, nếu một vùng nội dung rộng và đặt column-width: 200px, trình duyệt có thể chia nội dung thành nhiều cột. Khi vùng này bị thu hẹp, số cột sẽ giảm để tránh làm các cột trở nên quá chật.
Điểm quan trọng là column-width không buộc cột phải luôn giữ đúng kích thước được khai báo. Đây là giá trị định hướng để trình duyệt lựa chọn cách phân chia không gian phù hợp.
column-width ảnh hưởng đến số cột như thế nào?
Trình duyệt sẽ dựa vào chiều rộng khả dụng để xác định số cột phù hợp với giá trị column-width. Khi có đủ không gian, nội dung có thể được chia thành nhiều cột; khi không gian giảm, số cột sẽ tự động giảm theo.
.noidung {
column-width: 200px;
}
Ví dụ trên cho biết mỗi cột có chiều rộng mong muốn khoảng 200px. Nếu phần tử chứa đủ rộng, nhiều cột có thể xuất hiện. Khi phần tử nhỏ hơn, trình duyệt sẽ giảm số cột thay vì cố ép các cột vào một không gian quá hẹp.
Đây là lý do column-width đặc biệt hữu ích khi muốn bố cục nhiều cột có khả năng thích nghi theo chiều rộng màn hình mà không phải tự xác định số cột cho từng kích thước thiết bị.
Khi nào column-width chỉ tạo một cột?
Nếu không gian khả dụng không đủ để bố trí từ hai cột trở lên theo cách phù hợp, trình duyệt có thể chỉ hiển thị một cột. Điều này thường xảy ra khi phần tử chứa quá hẹp so với chiều rộng cột mong muốn.
Do đó, khi kiểm tra kết quả, không nên chỉ nhìn vào giá trị column-width mà cần xem cả chiều rộng của phần tử chứa. Đây là yếu tố quyết định việc nội dung cuối cùng được trình bày thành một hay nhiều cột.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính column-width 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 *
