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

การใช้งาน Grid ในหน้าจอขนาด Medium (md) หมายถึงการกำหนดรูปแบบการจัดวางคอลัมน์ (columns) ที่จะเริ่มมีผลเมื่อหน้าจอมีความกว้างตั้งแต่ 768px ขึ้นไป โดยใช้คลาส .col-md-* เพื่อควบคุมการแบ่งส่วนหน้าจอ

ตัวอย่างการใช้งาน

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

ในตัวอย่างนี้ เมื่อหน้าจอมีขนาด 768px ขึ้นไป คอลัมน์ 1 และคอลัมน์ 2 จะถูกแบ่งกันคนละ 50% (หรือครึ่งหนึ่งของหน้าจอ) แต่ถ้าหน้าจอมีขนาดน้อยกว่า 768px คอลัมน์จะเรียงต่อกันลงมาในแนวตั้ง

การแบ่งคอลัมน์แบบเท่ากัน

ในกรณีที่ต้องการแบ่งคอลัมน์ให้มีขนาดเท่ากันทั้งหมด เราสามารถใช้ .col-md โดยไม่ต้องระบุขนาด

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

ในตัวอย่างนี้คอลัมน์ทั้ง 3 จะถูกแบ่งเท่าๆ กัน

การแบ่งคอลัมน์แบบไม่เท่ากัน

บางครั้งเราอาจต้องการแบ่งคอลัมน์แบบไม่เท่ากัน เช่น ให้คอลัมน์หนึ่งกินพื้นที่มากกว่าคอลัมน์อื่นๆ

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

ในกรณีนี้ คอลัมน์ 1 จะกินพื้นที่ 8 ส่วนจาก 12 ส่วนทั้งหมด ส่วนคอลัมน์ 2 จะกิน 4 ส่วน

การใช้ Offset

หากต้องการให้คอลัมน์บางส่วนเลื่อนจากจุดเริ่มต้นของแถว เราสามารถใช้ .offset-md-*

<div class="container">
  <div class="row">
    <div class="col-md-4 offset-md-4">คอลัมน์ที่ถูกเลื่อน</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์ถูกเลื่อนไป 4 ส่วนจากขอบซ้ายของแถว และจะกินพื้นที่ 4 ส่วนของหน้าจอ

การซ้อนคอลัมน์ในแถว

เราสามารถซ้อนคอลัมน์ภายในแถวเพื่อการจัดเรียงข้อมูลที่ซับซ้อนได้

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

ในตัวอย่างนี้ คอลัมน์ใหญ่ทางซ้ายมือถูกแบ่งออกเป็นคอลัมน์ย่อย 2 คอลัมน์ และคอลัมน์ทางขวามือกินพื้นที่ 50% ของหน้าจอ

การซ่อนหรือแสดงคอลัมน์ตามขนาดหน้าจอ

Bootstrap 5 ยังมีคลาสที่ช่วยในการซ่อนหรือแสดงคอลัมน์ตามขนาดหน้าจอ เราสามารถใช้ .d-none ร่วมกับ .d-md-block เพื่อซ่อนคอลัมน์ในหน้าจอเล็ก แต่แสดงเมื่อเป็นหน้าจอ Medium ขึ้นไป

<div class="container">
  <div class="row">
    <div class="col-md-6">คอลัมน์ที่ 1</div>
    <div class="col-md-6 d-none d-md-block">คอลัมน์ที่ 2 (จะแสดงเฉพาะหน้าจอ Medium ขึ้นไป)</div>
  </div>
</div>