CSS Grid

ระบบกริดเริ่มต้นของ Bootstrap แสดงถึงจุดสุดยอดของเทคนิคการจัดวาง CSS กว่าทศวรรษ ที่ทดลองและทดสอบโดยผู้คนหลายล้านคน แต่มันยังถูกสร้างขึ้นโดยไม่มีคุณลักษณะและเทคนิค CSS ที่ทันสมัยมากมายที่เราเห็นในเบราว์เซอร์เช่น CSS Grid ใหม่

มันทำงานอย่างไร

ด้วย Bootstrap 5 เราได้เพิ่มตัวเลือกเพื่อเปิดใช้งานระบบกริดที่แยกจากกันซึ่งสร้างขึ้นจาก CSS Grid แต่มีการบิดแบบ Bootstrap คุณยังคงได้รับชั้นเรียนที่คุณสามารถสมัครเพื่อสร้างเลย์เอาต์ที่ตอบสนองได้ แต่ด้วยแนวทางที่แตกต่างภายใต้ประทุน

• CSS Grid เป็นการเลือกเข้าร่วม ปิดการใช้งานระบบกริดเริ่มต้นโดยการตั้งค่า$enable-grid-classes: falseและเปิดใช้งาน CSS Grid โดยการตั้ง$enable-cssgrid: trueค่า จากนั้นคอมไพล์ Sass ของคุณใหม่

• แทนที่อินสแตนซ์ของ.rowด้วย.grid. คลาส.gridตั้งค่าdisplay: gridและสร้าง a grid-templateที่คุณสร้างด้วย HTML ของคุณ

• แทนที่.col-*คลาสด้วย.g-col-*คลาส เนื่องจากคอลัมน์ CSS Grid ของเราใช้grid-columnคุณสมบัติแทนwidth.

• กำหนดขนาดคอลัมน์และรางน้ำโดยใช้ตัวแปร CSS ตั้งค่าเหล่านี้ในพาเรน.gridต์และปรับแต่งตามที่คุณต้องการ ทั้งแบบอินไลน์หรือในสไตล์ชีตด้วย--bs-columnsและ--bs-gap

ในอนาคต Bootstrap มีแนวโน้มที่จะเปลี่ยนไปใช้โซลูชันไฮบริดเนื่องจากgapคุณสมบัติได้รับการสนับสนุนเบราว์เซอร์เกือบเต็มรูปแบบสำหรับ flexbox

ความแตกต่างที่สำคัญ

เมื่อเทียบกับระบบกริดเริ่มต้น:

• โปรแกรมอรรถประโยชน์แบบยืดหยุ่นจะไม่ส่งผลต่อคอลัมน์ CSS Grid ในลักษณะเดียวกัน

• ช่องว่างเข้ามาแทนที่รางน้ำ gapคุณสมบัติแทนที่แนวนอนจากpaddingระบบกริดเริ่มต้นของเราและฟังก์ชั่นที่คล้ายmarginกัน มากขึ้น

• ดังนั้น ต่างจาก.rows .gridไม่มีระยะขอบติดลบ และไม่สามารถใช้ยูทิลิตี้ระยะขอบเพื่อเปลี่ยนรางน้ำของกริดได้ ช่องว่างกริดถูกนำไปใช้ในแนวนอนและแนวตั้งโดยค่าเริ่มต้น ดูส่วนการปรับแต่งสำหรับรายละเอียดเพิ่มเติม

• สไตล์อินไลน์และแบบกำหนดเองควรถูกมองว่าเป็นการแทนที่คลาสตัวปรับแต่ง (เช่นstyle="--bs-columns: 3;"vs class="row-cols-3")

• การซ้อนทำงานในลักษณะเดียวกัน แต่อาจทำให้คุณต้องรีเซ็ตจำนวนคอลัมน์ในแต่ละอินสแตนซ์ของไฟล์.grid. ดูส่วนการทำรังสำหรับรายละเอียด

ตัวอย่าง

สามคอลัมน์

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

<div class="grid text-center">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

ตอบสนอง

ใช้คลาสที่ตอบสนองเพื่อปรับเลย์เอาต์ของคุณในวิวพอร์ต ที่นี่ เราเริ่มต้นด้วยสองคอลัมน์บนวิวพอร์ตที่แคบที่สุด จากนั้นขยายเป็นสามคอลัมน์บนวิวพอร์ตขนาดกลางขึ้นไป

<div class="grid text-center">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

เปรียบเทียบกับเค้าโครงสองคอลัมน์นี้ที่วิวพอร์ตทั้งหมด

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ห่อ

รายการกริดจะรวมเข้ากับบรรทัดถัดไปโดยอัตโนมัติเมื่อไม่มีที่ว่างในแนวนอน โปรดทราบว่าgapจะใช้กับช่องว่างแนวนอนและแนวตั้งระหว่างรายการกริด

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

เริ่ม

คลาสเริ่มต้นมีจุดมุ่งหมายเพื่อแทนที่คลาสออฟเซ็ตของกริดเริ่มต้น แต่ไม่เหมือนกันทั้งหมด CSS Grid สร้างเทมเพลตกริดผ่านสไตล์ที่บอกให้เบราว์เซอร์ "เริ่มต้นที่คอลัมน์นี้" และ "สิ้นสุดที่คอลัมน์นี้" คุณสมบัติเหล่านั้นคือgrid-column-startและgrid-column-end. เริ่มเรียนเป็นชวเลขสำหรับอดีต จับคู่กับคลาสคอลัมน์เพื่อปรับขนาดและจัดแนวคอลัมน์ตามที่คุณต้องการ คลาสเริ่มต้นเริ่มต้นที่ ค่า 1ที่0ไม่ถูกต้องสำหรับคุณสมบัติเหล่านี้

<div class="grid text-center">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

คอลัมน์อัตโนมัติ

เมื่อไม่มีคลาสในรายการกริด (รายการย่อยของ a .grid) แต่ละรายการกริดจะถูกปรับขนาดเป็นหนึ่งคอลัมน์โดยอัตโนมัติ

<div class="grid text-center">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

ลักษณะการทำงานนี้สามารถผสมกับคลาสคอลัมน์กริด

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

การทำรัง

คล้ายกับระบบกริดเริ่มต้นของเรา CSS Grid ของเราอนุญาตให้ซ้อน.grids ได้ง่าย อย่างไรก็ตาม ไม่เหมือนกับค่าเริ่มต้น ตารางนี้สืบทอดการเปลี่ยนแปลงในแถว คอลัมน์ และช่องว่าง พิจารณาตัวอย่างด้านล่าง:

• เราลบล้างจำนวนคอลัมน์เริ่มต้นด้วยตัวแปร CSS ในเครื่อง--bs-columns: 3:
• ในคอลัมน์อัตโนมัติแรก จำนวนคอลัมน์จะสืบทอดมา และแต่ละคอลัมน์จะเท่ากับหนึ่งในสามของความกว้างที่มีอยู่
• ในคอลัมน์อัตโนมัติที่สอง เราได้รีเซ็ตจำนวนคอลัมน์ที่ซ้อนกัน.gridเป็น 12 (ค่าเริ่มต้นของเรา)
• คอลัมน์อัตโนมัติที่สามไม่มีเนื้อหาที่ซ้อนกัน

ในทางปฏิบัติ วิธีนี้ช่วยให้มีเลย์เอาต์ที่กำหนดเองและซับซ้อนมากขึ้นเมื่อเปรียบเทียบกับระบบกริดเริ่มต้นของเรา

<div class="grid text-center" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

การปรับแต่ง

ปรับแต่งจำนวนคอลัมน์ จำนวนแถว และความกว้างของช่องว่างด้วยตัวแปร CSS ในเครื่อง

ตัวแปร CSS เหล่านี้ไม่มีค่าเริ่มต้น แต่จะใช้ค่าทางเลือกที่ใช้จนกว่าจะมีการระบุอินสแตนซ์ในเครื่องแทน ตัวอย่างเช่น เราใช้var(--bs-rows, 1)สำหรับแถว CSS Grid ซึ่งไม่สนใจ--bs-rowsเพราะยังไม่ได้ตั้งค่าไว้ที่ใด เมื่อเป็น.gridเช่นนั้น อินสแตนซ์จะใช้ค่านั้นแทนค่าทางเลือก1ของ

ไม่มีคลาสกริด

องค์ประกอบลูกทันที.gridคือรายการกริด ดังนั้นพวกเขาจะปรับขนาดโดยไม่ต้องเพิ่ม.g-colคลาส อย่างชัดเจน

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

คอลัมน์และช่องว่าง

ปรับจำนวนคอลัมน์และช่องว่าง

<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>

<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

การเพิ่มแถว

การเพิ่มแถวและการเปลี่ยนตำแหน่งของคอลัมน์:

<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

ช่องว่าง

เปลี่ยนช่องว่างในแนวตั้งโดยการแก้ไขไฟล์row-gap. โปรดทราบว่าเราใช้gapบน.grids แต่สามารถปรับเปลี่ยนได้ตามrow-gapต้องการcolumn-gap

<div class="grid text-center" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ด้วยเหตุนี้ คุณจึงสามารถมีค่าgaps แนวตั้งและแนวนอนที่แตกต่างกัน ซึ่งสามารถใช้ค่าเดียว (ทุกด้าน) หรือค่าคู่ (แนวตั้งและแนวนอน) สามารถใช้กับรูปแบบอินไลน์สำหรับgapหรือกับ--bs-gapตัวแปร CSS ของเรา

<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ซาส

ข้อจำกัดหนึ่งของ CSS Grid คือคลาสเริ่มต้นของเรายังคงสร้างโดยตัวแปร Sass สองตัว$grid-columnsและ$grid-gutter-width. สิ่งนี้จะกำหนดจำนวนคลาสที่สร้างใน CSS ที่คอมไพล์แล้วของเราอย่างมีประสิทธิภาพ คุณมีสองตัวเลือกที่นี่:

• แก้ไขตัวแปร Sass เริ่มต้นเหล่านั้นและคอมไพล์ CSS ของคุณใหม่
• ใช้รูปแบบอินไลน์หรือแบบกำหนดเองเพื่อเพิ่มคลาสที่มีให้

ตัวอย่างเช่น คุณสามารถเพิ่มจำนวนคอลัมน์และเปลี่ยนขนาดช่องว่าง จากนั้นกำหนดขนาด "คอลัมน์" ของคุณด้วยการผสมผสานสไตล์อินไลน์และคลาสคอลัมน์ CSS Grid ที่กำหนดไว้ล่วงหน้า (เช่น.g-col-4)

<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>