column-span คืออะไร?
คุณสมบัติ column-span ใช้กำหนดให้องค์ประกอบ (element) ขยายครอบคลุมหลายคอลัมน์ แทนที่จะอยู่ในคอลัมน์เดียว เหมาะสำหรับหัวข้อ (headings) หรือรูปภาพที่ต้องการให้แสดงเต็มความกว้าง
ค่าที่ใช้ได้
none(ค่าเริ่มต้น) - อยู่ในคอลัมน์เดียวตามปกติall- ขยายครอบคลุมทุกคอลัมน์
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-rule-color: maroon;
column-rule-style: dashed;
column-rule-width: 2px;
column-gap: 30px;
}
h1 {
column-span: all; /* หัวข้อนี้จะขยายครอบคลุมทั้ง 4 คอลัมน์ */
text-align: center;
color: maroon;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="demo">
<h1>นี่คือหัวข้อหลักที่ขยายครอบคลุมทุกคอลัมน์</h1>
นี่คือข้อความตัวอย่างที่ไหลใน 4 คอลัมน์
ข้อความจะต่อเนื่องจากคอลัมน์แรกไปจนถึงคอลัมน์สุดท้าย
หัวข้อ h1 จะอยู่ด้านบนสุด แยกจากคอลัมน์ข้อความ
</div>
</body>
</html>
กรณีการใช้งานทั่วไป
- หัวข้อบทความ: ให้หัวข้อแสดงเต็มความกว้างก่อนข้อความคอลัมน์
- รูปภาพกว้าง: ให้รูปภาพแสดงข้ามคอลัมน์
- กล่องข้อความสำคัญ: เน้นข้อมูลสำคัญให้โดดเด่น
ข้อควรระวัง
- องค์ประกอบที่มี
column-span: allจะสร้าง Block Formatting Context ใหม่ - margin และ padding อาจทำงานต่างจากปกติ
- ไม่รองรับใน Firefox เวอร์ชันเก่า (ต้องใช้ prefix หรือ fallback)
ตัวอย่างเพิ่มเติม: รูปภาพข้ามคอลัมน์
.article-image {
column-span: all;
width: 100%;
margin: 20px 0;
}