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