Bootstrap 5 การใช้งาน Grid กับหน้าจอขนาดใหญ่ (Large)

ใน Bootstrap 5 กำหนดว่าหน้าจอที่มีความกว้างตั้งแต่ 992px ขึ้นไป จะจัดอยู่ในขนาด “Large” โดยใช้คีย์เวิร์ด lg ในการกำหนดการแสดงผลของ Grid

รูปแบบการใช้งาน Grid บนหน้าจอ Large

การกำหนดความกว้างของคอลัมน์

เราสามารถกำหนดจำนวนคอลัมน์ที่จะใช้ในแต่ละหน้าจอได้ตามความต้องการ เช่น

<div class="container">
  <div class="row">
    <div class="col-lg-4">คอลัมน์ที่ 1</div>
    <div class="col-lg-4">คอลัมน์ที่ 2</div>
    <div class="col-lg-4">คอลัมน์ที่ 3</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์จะถูกแบ่งออกเป็น 3 ส่วน (4+4+4 = 12) โดยแต่ละคอลัมน์จะมีความกว้าง 4 ส่วนบนหน้าจอขนาด Large

การใช้งาน Auto-layout Grid

Bootstrap 5 รองรับการจัดการ Layout แบบอัตโนมัติ (Auto-layout) โดยไม่จำเป็นต้องระบุขนาดของคอลัมน์

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

ในตัวอย่างนี้ แต่ละคอลัมน์จะถูกแบ่งสัดส่วนให้เท่ากันอัตโนมัติ โดยไม่ต้องระบุขนาดของแต่ละคอลัมน์

การใช้ Offset (การขยับตำแหน่งคอลัมน์)

สามารถใช้ offset เพื่อขยับคอลัมน์ไปด้านข้างได้

<div class="container">
  <div class="row">
    <div class="col-lg-4 offset-lg-4">คอลัมน์ที่ 1</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์ที่ 1 จะถูกขยับไปทางขวา 4 ส่วน ทำให้ดูเหมือนว่ามันอยู่ตรงกลางของหน้าจอ

การใช้งาน Nesting (การซ้อนคอลัมน์)

สามารถซ้อนคอลัมน์ภายในคอลัมน์ได้เพื่อจัดการ Layout ให้ยืดหยุ่นมากขึ้น

<div class="container">
  <div class="row">
    <div class="col-lg-8">
      คอลัมน์ใหญ่
      <div class="row">
        <div class="col-lg-6">คอลัมน์ย่อยที่ 1</div>
        <div class="col-lg-6">คอลัมน์ย่อยที่ 2</div>
      </div>
    </div>
    <div class="col-lg-4">คอลัมน์หลักที่ 2</div>
  </div>
</div>

ในตัวอย่างนี้ มีการซ้อนคอลัมน์ย่อย 2 คอลัมน์อยู่ภายในคอลัมน์ใหญ่

การใช้ Gutter (ระยะห่างระหว่างคอลัมน์)

สามารถกำหนดหรือปรับระยะห่างระหว่างคอลัมน์ (Gutter) ได้ด้วย g- classes เช่น

<div class="container">
  <div class="row g-3">
    <div class="col-lg-6">คอลัมน์ที่ 1</div>
    <div class="col-lg-6">คอลัมน์ที่ 2</div>
  </div>
</div>

ในตัวอย่างนี้ g-3 จะกำหนดให้ระยะห่างระหว่างคอลัมน์เท่ากับ 3 (ค่า Gutter)