column-width คืออะไร?
คุณสมบัติ column-width ใช้กำหนด ความกว้างขั้นต่ำ ของแต่ละคอลัมน์ในเลย์เอาต์หลายคอลัมน์ บราวเซอร์จะคำนวณจำนวนคอลัมน์ที่พอดีโดยอัตโนมัติจากพื้นที่ที่มี
ความแตกต่างระหว่าง column-width และ column-count
| คุณสมบัติ | พฤติกรรม |
|---|---|
| column-width | กำหนดความกว้างขั้นต่ำ จำนวนคอลัมน์เปลี่ยนตามพื้นที่ |
| column-count | กำหนดจำนวนคอลัมน์คงที่ ความกว้างเปลี่ยนตามพื้นที่ |
| columns (shorthand) | กำหนดทั้งสองค่า พฤติกรรมขึ้นอยู่กับค่าทั้งสอง |
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-rule-color: gray;
column-rule-style: dashed;
column-rule-width: 2px;
column-width: 100px; /* ความกว้างขั้นต่ำ 100px */
column-gap: 30px;
}
</style>
</head>
<body>
<div class="demo">
นี่คือข้อความตัวอย่างสำหรับทดสอบ column-width
บนหน้าจอขนาดใหญ่อาจแสดง 4 คอลัมน์
แต่บนหน้าจอเล็กอาจแสดงน้อยกว่า 4 คอลัมน์
เพราะแต่ละคอลัมน์ต้องมีความกว้างอย่างน้อย 100px
</div>
</body>
</html>
การทำงานร่วมกับ column-count
.demo {
column-count: 4; /* สูงสุด 4 คอลัมน์ */
column-width: 150px; /* แต่ละคอลัมน์อย่างน้อย 150px */
/* ผลลัพธ์: จะแสดงไม่เกิน 4 คอลัมน์ และแต่ละคอลัมน์ไม่ต่ำกว่า 150px */
}คำแนะนำ
- เหมาะสำหรับการออกแบบ Responsive โดยไม่ต้องใช้ Media Queries
- ควรระบุ
column-gapเสมอเพื่อความอ่านง่าย - ใช้ร่วมกับ
column-ruleเพื่อสร้างเส้นแบ่งที่ชัดเจน
