Bootstrap 5 การใช้งาน Grid กับหน้าจอ Extra Small

Grid ใน Bootstrap 5 เป็นระบบที่ใช้จัดการโครงสร้างเลย์เอาต์ของหน้าเว็บเพื่อให้แสดงผลได้อย่างมีประสิทธิภาพบนอุปกรณ์ที่มีขนาดหน้าจอต่าง ๆ โดยในกรณีของหน้าจอ Extra Small (ขนาดหน้าจอน้อยกว่า 576px เช่น โทรศัพท์มือถือขนาดเล็ก) Bootstrap จะใช้คลาส .col- เพื่อกำหนดความกว้างของคอลัมน์ให้เหมาะสม

แนวคิดหลักของ Bootstrap Grid

Bootstrap ใช้โครงสร้างตาราง (Grid System) ที่แบ่งพื้นที่การแสดงผลออกเป็น 12 ส่วนเท่า ๆ กัน ซึ่งเราสามารถเลือกใช้จำนวนคอลัมน์ที่ต้องการได้ โดยคอลัมน์จะถูกจัดเรียงอัตโนมัติตามขนาดหน้าจอ

สำหรับหน้าจอขนาดเล็ก (Extra Small) สามารถใช้คลาส .col- ซึ่งจะหมายถึงหน้าจอที่มีขนาดเล็กกว่า 576px นอกจากนี้ยังสามารถใช้คลาส .col-sm-, .col-md-, .col-lg-, .col-xl-, และ .col-xxl- สำหรับหน้าจอที่มีขนาดใหญ่ขึ้น

รูปแบบการใช้งาน Grid สำหรับหน้าจอ Extra Small

การแบ่งคอลัมน์แบบอัตโนมัติ

Bootstrap จะจัดแบ่งคอลัมน์ตามพื้นที่ที่มีอยู่โดยอัตโนมัติ หากไม่ระบุขนาดของคอลัมน์

<div class="container">
  <div class="row">
    <div class="col">คอลัมน์ 1</div>
    <div class="col">คอลัมน์ 2</div>
    <div class="col">คอลัมน์ 3</div>
  </div>
</div>

ในหน้าจอ Extra Small แต่ละคอลัมน์จะแสดงเท่ากัน 1/3 ของพื้นที่ทั้งหมด

การกำหนดขนาดคอลัมน์เฉพาะสำหรับ Extra Small

เราสามารถใช้คลาส .col- เพื่อกำหนดจำนวนคอลัมน์สำหรับหน้าจอขนาดเล็กได้ เช่น การกำหนดคอลัมน์ที่ใช้ 6 จาก 12 ส่วน (ครึ่งหนึ่งของพื้นที่)

<div class="container">
  <div class="row">
    <div class="col-6">คอลัมน์ 1</div>
    <div class="col-6">คอลัมน์ 2</div>
  </div>
</div>

คอลัมน์นี้จะถูกแบ่งเป็น 2 ส่วนเท่า ๆ กันเมื่ออยู่บนหน้าจอขนาด Extra Small

การกำหนดขนาดคอลัมน์แบบไม่เท่ากัน

สามารถกำหนดคอลัมน์ให้มีขนาดแตกต่างกันได้ตามต้องการ

<div class="container">
  <div class="row">
    <div class="col-4">คอลัมน์ 1 (4 ส่วน)</div>
    <div class="col-8">คอลัมน์ 2 (8 ส่วน)</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์แรกจะใช้พื้นที่ 4 ส่วนจาก 12 และคอลัมน์ที่สองจะใช้ 8 ส่วน

การใช้งานคอลัมน์แบบ Flex เพื่อการจัดเรียงที่ยืดหยุ่น

นอกจากการแบ่งคอลัมน์ตามจำนวนแล้ว เรายังสามารถใช้ระบบ Flex ของ Bootstrap เพื่อจัดตำแหน่งคอลัมน์ได้ เช่น การจัดให้อยู่กึ่งกลางหรือเรียงต่อกัน

<div class="container">
  <div class="row justify-content-center">
    <div class="col-6">คอลัมน์กึ่งกลาง</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์จะอยู่กึ่งกลางในหน้าจอขนาด Extra Small

การจัดเรียงคอลัมน์แนวตั้ง

เมื่อเราต้องการให้คอลัมน์เรียงกันในแนวตั้งบนหน้าจอ Extra Small เราสามารถใช้คุณสมบัติ Breakpoint ของ Bootstrap ได้ เช่น การกำหนดให้แสดงแนวตั้งในหน้าจอขนาดเล็กและแนวนอนในหน้าจอขนาดใหญ่

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">คอลัมน์ 1</div>
    <div class="col-12 col-md-6">คอลัมน์ 2</div>
  </div>
</div>

ในหน้าจอ Extra Small คอลัมน์จะแสดงในแนวตั้ง ส่วนในหน้าจอขนาดใหญ่กว่า (เช่นขนาดกลางขึ้นไป) คอลัมน์จะแสดงในแนวนอน

การใช้ Offset สำหรับการจัดตำแหน่ง

Bootstrap มีระบบ Offset ที่สามารถช่วยในการจัดตำแหน่งคอลัมน์ โดยการเว้นพื้นที่ว่างจากด้านซ้าย

<div class="container">
  <div class="row">
    <div class="col-4 offset-4">คอลัมน์กลาง</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์จะถูกเว้นช่องว่าง 4 ส่วนจากด้านซ้าย และตัวคอลัมน์จะอยู่ตรงกลางหน้าจอ