Thiết lập số cột hoặc chiều rộng cột bằng CSS3

Sử dụng thuộc tính columns trong CSS3 để thiết lập số cột và chiều rộng. Đây là shorthand cho column-width và column-count.

columns: auto | column-width column-count | initial | inherit;

Ví dụ 1: Tự động (auto auto)

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  -webkit-columns: auto auto; /* Chrome, Safari, Opera */
  -moz-columns: auto auto;    /* Firefox */
  columns: auto auto;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
  Trí tuệ nhân tạo (AI) ngày nay đã vượt xa hype của blockchain và quantum computing. 
  Điều này do nguồn tính toán khổng lồ dễ dàng tiếp cận cho người phổ thông. 
  Các developer tận dụng điều này để tạo mô hình Machine Learning mới và re-train 
  mô hình hiện có cho hiệu năng và kết quả tốt hơn. 
  Sự dễ dàng tiếp cận High Performance Computing (HPC) đã làm tăng đột biến 
  nhu cầu chuyên gia IT có kỹ năng Machine Learning.
</div>
</body>
</html>

Kết quả

Ví dụ 2: Cố định 3 cột, chiều rộng 40px

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  -webkit-columns: 40px 3; /* Chrome, Safari, Opera */
  -moz-columns: 40px 3;    /* Firefox */
  columns: 40px 3;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
  Trí tuệ nhân tạo (AI) ngày nay đã vượt xa hype của blockchain và quantum computing. 
  Điều này do nguồn tính toán khổng lồ dễ dàng tiếp cận cho người phổ thông. 
  Các developer tận dụng điều này để tạo mô hình Machine Learning mới và re-train 
  mô hình hiện có cho hiệu năng và kết quả tốt hơn. 
  Sự dễ dàng tiếp cận High Performance Computing (HPC) đã làm tăng đột biến 
  nhu cầu chuyên gia IT có kỹ năng Machine Learning.
</div>
</body>
</html>

Kết quả

Giải thích:

• column-width: Chiều rộng tối thiểu của cột
• column-count: Số cột tối đa
• Trình duyệt tự cân bằng: nếu rộng thì nhiều cột, hẹp thì ít cột
• Prefix -webkit-, -moz- cho trình duyệt cũ