คุณสมบัติ columns ของ HTML DOM Style: Shorthand คอลัมน์

คุณสมบัติ columns เป็น shorthand property สำหรับกำหนด columnWidth และ columnCount พร้อมกันในคำสั่งเดียว

ไวยากรณ์ (Syntax)

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

ค่าที่รองรับ

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
<style>
  #DIV1 {
    columns: 5rem auto;  /* ความกว้างขั้นต่ำ 5rem, จำนวนคอลัมน์ auto */
  }
  img {
    border: 1px solid brown;
    margin: 5px 0;
    max-width: 100%;
  }
</style>
<script>
  function changeColumns() {
    document.getElementById("DIV1").style.columns = "10px 3";
    document.getElementById("Sample").innerHTML = "คอลัมน์ถูกปรับเปลี่ยน: ความกว้าง 10px, จำนวน 3 คอลัมน์";
  }
</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>คลิกปุ่มเพื่อเปลี่ยนคุณสมบัติ columns ของ div ด้านบน</p>
<button onclick="changeColumns()">เปลี่ยน Columns</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: คอลัมน์กว้างขั้นต่ำ 5rem (80px), จำนวน auto
หลัง: คอลัมน์กว้าง 10px, จำนวน 3 คอลัมน์

วิธีการทำงานของ Columns Shorthand

Responsive Columns Pattern (แนะนำ)

.responsive-columns {
  columns: 250px auto;
  column-gap: 2rem;
  column-rule: 1px solid #eee;
}

/* หรือใช้ Media Queries ควบคุม column-count */
@media (max-width: 600px) {
  .responsive-columns { columns: 1; }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .responsive-columns { columns: 2; }
}
@media (min-width: 1001px) {
  .responsive-columns { columns: 3; }
}

คุณสมบัติ Multi-column ที่เกี่ยวข้อง

การรองรับเบราว์เซอร์

รองรับ Chrome 50+, Firefox 52+, Safari 10+, Edge 12+ (ไม่รองรับ IE)