วิธีเขียน CSS แบ่ง 3 คอลัมน์

บทความนี้สอนเขียน CSS สำหรับแบ่งการแสดงผลเป็น 3 คอลัมน์ โดยใน 1 แถวแนวนอนจะประกอบด้วยพื้นที่การแสดงผล 3 แถว หรือ 3 คอลัมน์ โดยใช้คำสั่ง display grid ร่วมกับคำสั่ง grid-template-columns โดยวิธีการเขียน CSS เพื่อแบ่งคอลัมน์แบบนี้รองรับการแสดงผลบนอุปกรณ์พาพกด้วย สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง วิธีเขียน CSS แบ่ง 3 คอลัมน์

1. สร้าง class ชื่อ three-columns กำหนดการแสดงผลแบบ grid และใช้คำสั่ง grid-template-columns เพื่อกำหนดจำนวนคอลัมน์ที่ต้องการ คือ 3 คอลัมน์ โดยการใส่ 1fr ทั้งหมด 3 อัน

<style>
    .three-columns  {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .three-columns > div {
        border: solid 1px orange;
        padding: 0.5rem;
        margin: 0.5rem;
        text-align: center;
    }
</style>

2. นำ class ที่สร้างในขั้นตอนที่ 1 มาสร้างส่วนการแสดงผล โดยโค้ดนี้จะแบ่งการแสดงผลหน้าเว็บไซต์ทั้งหมด 3 คอลัมน์

<div class="three-columns">
    <div>คอลัมน์ 1</div>
    <div>คอลัมน์ 2</div>
    <div>คอลัมน์ 3</div>
</div>

สรุป กรณีใช้ CSS ในการแบ่งคอลัมน์ แนะนำให้ใช้ระบบ grid เนื่องจากเขียนง่าย มีความยืดหยุ่นสูง และได้รับความนิยมในปัจจุบัน โดยประกอบด้วยคำสั่งที่สำคัญ 2 คำสั่ง คือ display: grid และ grid-template-columns