Thuộc tính columns trong HTML DOM Style

Thuộc tính columns là shorthand để thao tác đồng thời columnWidth và columnCount.

Cú pháp

object.style.columns = "auto|column-width column-count|initial|inherit"

Giá trị tham số

Giá trị	Mô tả
auto	column-width và column-count đều auto (mặc định)
columnWidth	Chỉ định độ rộng cột
columnCount	Chỉ định số lượng cột
initial	Giá trị mặc định
inherit	Kế thừa từ phần tử cha

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
<style>
  #DIV1 { columns: 5rem auto; }
  img { border: 1px solid brown; }
</style>
<script>
  function changeColumns() {
    document.getElementById("DIV1").style.columns = "10px 3";
    document.getElementById("Sample").innerHTML = "Thuộc tính columns đã được sửa đổi";
  }
</script>
</head>
<body>
<div id="DIV1">
  <img src="https://www.tutorialspoint.com/images/xamarian.png"><br/>
  <img src="https://www.tutorialspoint.com/images/pl-sql.png"><br/>
  <img src="https://www.tutorialspoint.com/images/asp-net.png"><br/>
  <img src="https://www.tutorialspoint.com/images/powerbi.png"><br/>
  <img src="https://www.tutorialspoint.com/images/Tableau.png"><br/>
  <img src="https://www.tutorialspoint.com/images/Big-Data-Analytics.png"><br/>
  <img src="https://www.tutorialspoint.com/images/home_time_series.png"><br/>
  <img src="https://www.tutorialspoint.com/images/microsoftproject.png"><br/>
</div>
<p>Thay đổi columns property của div trên bằng cách nhấn nút dưới đây</p>
<button onclick="changeColumns()">Thay đổi Columns</button>
<p id="Sample"></p>
</body>
</html>

Kết quả

Ban đầu: column-width 5rem, column-count auto. Sau khi nhấn nút: column-width 10px, column-count 3.

Lưu ý: 10px quá nhỏ cho hình ảnh → cột rất hẹp. Thực tế dùng giá trị hợp lý (150px, 200px...).