div แบ่ง column ยังไง? พร้อมตัวอย่าง

บทความนี้สอนวิธีใช้ div แบ่ง column โดยจะสอน 2 วิธี คือ การใช้ Bootstrap ในส่วนของ Grid System เพื่อแบ่ง column และวิธีเขียน CSS เพื่อแบ่ง column ด้วยตัวเอง พร้อมตัวอย่างโค้ดโปรแกรม และคำอธิบาย โดยมีรายละเอียดดังนี้

 

ตัวอย่าง div แบ่ง column ด้วย Bootstrap Framework

วิธีแรกที่จะแนะนำคือ การใช้ Bootstrap Framework ในส่วนของ Grid System โดยระบบ Grid จะช่วยให้คุณแบ่งการแสดงผลของ column ได้อย่างง่ายดาย มีประสิทธิภาพ และรองรับการทำงานทั้งบน Desktop และ Mobile โดยมีขั้นตอนดังนี้

1. ติดตั้ง Bootstrap Framework ผ่าน CDN โดยบทความนี้ใช้ Bootstrap เวอร์ชันล่าสุด คือ 5.x.x ให้นำโค้ดด้านล่างไปวางไว้ภายในแท็ก head ของเว็บไซต์

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

 

2. ทดลองเขียน div แบ่ง column ด้วย Bootstrap Framework โดยตัวอย่างจะแบ่งทั้งหมด 4 column ใน 1 แถว

<div class="container">
    <div class="row">
        <div class="col-md-3">Colume A</div>
        <div class="col-md-3">Colume B</div>
        <div class="col-md-3">Colume C</div>
        <div class="col-md-3">Colume D</div>
    </div>
</div>

จากตัวอย่างวิธีใช้ div แบ่ง column ด้วย Bootstrap Framework สามารถอธิบายได้ดังนี้

1. ระบบ Grid System ของ Bootstrap ใน 1 แถวแนวนอน (row) จะมี column ได้สูงสุด 12 column (แทนตัวเลขด้วย 1 - 12)

2. จากโค้ดใช้ col-md-3 ทั้งหมด 4 ครั้งเพื่อแบ่ง 4 column ใน 1 แถว row ก็หมายความว่า 3 + 3 + 3 + 3 = 12

3. ส่วนสำหรับคำสั่ง col-md-* ตัว md ย่อมาจากใช้กับหน้าจอขนาด ≥768px ก็คือหน้าจอ desktop

4. ถ้าต้องการใช้กับหน้าจอขนาดเล็ก คือ มือถือ ให้ใส่เพิ่ม col-sm-* ตามด้วย column ที่ต้องการ

 

ตัวอย่าง div แบ่ง column แบบเขียน CSS เอง

วิธีนี้ไม่ใช้ Framework ใดๆ เป็นการเขียน CSS ด้วยตัวเอง เหมาะสำหรับการแก้ไขในบางจุดของเว็บไซต์ที่อาจไม่มี Framework ตัวอย่างใช้ div แบ่ง column โดยการแบ่งทั้งหมด 4 column ใน 1 แถว แต่ละ column กว้าง 25%

<style>
.col {
    width: 25%;
    float: left;
    text-align: center;
}
</style>

<div class="container">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
    <div class="col">Column D</div>
</div>

จากตัวอย่างวิธีใช้ div แบ่ง column แบบเขียน CSS เอง สามารถอธิบายได้ดังนี้

1. การแสดงผลจะมีความกว้างทั้งหมด 100%

2. เราต้องการ 4 column ขนาดเท่ากันคือ 25% เท่ากับ 25 + 25 + 25 + 25 = 100

3. เขียน CSS กำหนดความกว้าง 25% ด้วย width: 25%

4. เขียน CSS ใช้คำสั่ง float: left เพื่อให้ div แต่ละอันอยู่ในแถวเดียวกัน

 

สรุป div แบ่ง column ยังไง? คำตอบคือ คุณสามารถเลือกได้ 2 วิธีคือใช้ Framework เช่น Bootstrap ผ่านระบบ Grid System ซึ่งส่วนตัวผมแนะนำวิธีนี้ เพราะมีประสิทธิภาพ และรองรับการแสดงผลบนอุปกรณ์ต่างๆ มากมาย และอีกวิธีคือการเขียน CSS ด้วยตัวเองเหมาะกับการแก้ไขจุดเล็กๆ น้อยๆ ของเว็บไซต์ที่ไม่ได้ใช้ Framework ด้านดังกล่าว