CSS วิธีแบ่ง 2 คอลัมน์ ด้วย grid

บทความนี้สอนวิธีแบ่ง 2 คอลัมน์ ด้วย grid ของภาษา CSS โดยใช้คำสั่ง diaply ร่วมกับ grid-template-columns โดยวิธีนี้เป็นการแบ่งคอลัมน์การแสดงผลเว็บไซต์ที่มีประสิทธิภาพ รองรับกานแสดงผลแบบ responsive layouts ด้วย สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง วิธีแบ่ง 2 คอลัมน์ ด้วยภาษา CSS

1. เขียน CSS สร้าง class ชื่อ two-columns และอ้างถึง div ใน class two-columns

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

จากตัวอย่าง class two-columns มีการแบ่งคอลัมน์ด้วยระบบ grid ผ่านคำสั่ง display: grid และใช้คำสั่ง grid-two-columns เพื่อกำหนดจำนวนคอลัมน์ที่ต้องการแบ่ง ตัวอย่างแบ่ง 2 คอลัมน์จึงเขียน 1fr 2 ครั้ง จากนั้นอ้างถึง div ใน class two-columns เพื่อกำหนด style ให้กับ div ทั้งหมดที่ถูกแบ่งคอลัมน์

2. สร้างคอลัมน์ด้วย div ทั้งหมด 2 คอลัมน์

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

จากตัวอย่างเรียกใช้ class two-columns และสร้าง div ไว้ภายในทั้งหมด 2 div เนื่องจากแบ่งทั้งหมด 2 คอลัมน์

สรุป การเขียน CSS เพื่อแบ่งคอลัมน์การแสดงผลหน้าเว็บไซต์ แนะนำให้ใช้คำสั่ง display: grid ร่วมกับ grid-template-columns และกำหนดจำนวนคอลัมน์ที่ต้องการด้วย 1fr ซึ่งวิธีนี้มีความยืดหยุ่นสูง และรองรับการแสดงผลแบบ responsive layouts ด้วย