การตั้งค่าจำนวนคอลัมน์และความกว้างด้วย CSS3 (Columns Property)

ใช้คุณสมบัติ columns ใน CSS3 เพื่อตั้งค่าจำนวนคอลัมน์และความกว้าง เป็น shorthand ของ column-width และ column-count ตั้งค่าได้ดังนี้:

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

ตัวอย่างที่ 1: ตั้งค่า column-count (จำนวนคอลัมน์)

<!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"> Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing... </div> </body> </html>

ผลลัพธ์

ตัวอย่างที่ 2: ตั้งค่า column-width และ column-count

<!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"> Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing... </div> </body> </html>

ผลลัพธ์

คำอธิบายค่า

• auto auto - เบราว์เซอร์ตัดสินใจเอง (ค่าเริ่มต้น)
• column-width - ความกว้างขั้นต่ำของคอลัมน์ (เช่น 40px, 200px, 15em)
• column-count - จำนวนคอลัมน์สูงสุด (เช่น 3, 4, 5)

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

/* ความกว้างคอลัมน์ */
column-width: 200px;

/* จำนวนคอลัมน์ */
column-count: 3;

/* ช่องว่างระหว่างคอลัมน์ */
column-gap: 20px;

/* เส้นแบ่งคอลัมน์ */
column-rule: 1px solid #ccc;

/* กระโดดข้ามคอลัมน์ */
column-span: all; /* สำหรับ h1, h2 ภายใน columns */

หมายเหตุ: ใช้ vendor prefix -webkit- และ -moz- สำหรับเบราว์เซอร์เก่า ปัจจุบันเบราว์เซอร์ใหม่รองรับ columns โดยตรงแล้ว