CSS Grid
เรียนรู้วิธีเปิดใช้งาน ใช้งาน และปรับแต่งระบบเลย์เอาต์ทางเลือกของเราที่สร้างขึ้นบน 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
และสร้าง agrid-template
ที่คุณสร้างด้วย HTML ของคุณ -
แทนที่
.col-*
คลาสด้วย.g-col-*
คลาส เนื่องจากคอลัมน์ CSS Grid ของเราใช้grid-column
คุณสมบัติแทนwidth
. -
กำหนดขนาดคอลัมน์และรางน้ำโดยใช้ตัวแปร CSS ตั้งค่าเหล่านี้ในพาเรน
.grid
ต์และปรับแต่งตามที่คุณต้องการ ทั้งแบบอินไลน์หรือในสไตล์ชีตด้วย--bs-columns
และ--bs-gap
ในอนาคต Bootstrap มีแนวโน้มที่จะเปลี่ยนไปใช้โซลูชันไฮบริดเนื่องจากgap
คุณสมบัติได้รับการสนับสนุนเบราว์เซอร์เกือบเต็มรูปแบบสำหรับ flexbox
ความแตกต่างที่สำคัญ
เมื่อเทียบกับระบบกริดเริ่มต้น:
-
โปรแกรมอรรถประโยชน์แบบยืดหยุ่นจะไม่ส่งผลต่อคอลัมน์ CSS Grid ในลักษณะเดียวกัน
-
ช่องว่างเข้ามาแทนที่รางน้ำ
gap
คุณสมบัติแทนที่แนวนอนจากpadding
ระบบกริดเริ่มต้นของเราและฟังก์ชั่นที่คล้ายmargin
กัน มากขึ้น -
ดังนั้นจึงแตกต่างจาก
.row
s คือ.grid
ไม่มีระยะขอบติดลบ และไม่สามารถใช้ยูทิลิตี้ระยะขอบเพื่อเปลี่ยนรางน้ำของกริดได้ ช่องว่างกริดถูกนำไปใช้ในแนวนอนและแนวตั้งโดยค่าเริ่มต้น ดูส่วนการปรับแต่งสำหรับรายละเอียดเพิ่มเติม -
สไตล์อินไลน์และแบบกำหนดเองควรถูกมองว่าเป็นการแทนที่คลาสตัวปรับแต่ง (เช่น
style="--bs-columns: 3;"
vsclass="row-cols-3"
) -
การซ้อนทำงานในลักษณะเดียวกัน แต่อาจทำให้คุณต้องรีเซ็ตจำนวนคอลัมน์ใ���แต่ละอินสแตนซ์ของไฟล์
.grid
. ดูส่วนการทำรังสำหรับรายละเอียด
ตัวอย่าง
สามคอลัมน์
คอลัมน์ที่มีความกว้างเท่ากันสามคอลัมน์ในวิวพอร์ตและอุปกรณ์ทั้งหมดสามารถสร้างได้โดยใช้.g-col-4
คลาส เพิ่มคลาสที่ตอบสนองเพื่อเปลี่ยนเลย์เอาต์ตามขนาดวิวพอร์ต
<div class="grid">
<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">
<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">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
ห่อ
รายการกริดจะรวมเข้ากับบรรทัดถัดไปโดยอัตโนมัติเมื่อไม่มีที่ว่างในแนวนอน โปรดทราบว่าgap
จะใช้กับช่องว่างแนวนอนและแนวตั้งระหว่างรายการกริด
<div class="grid">
<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">
<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">
<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">
<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 ของเราอนุญาตให้ซ้อน.grid
s ได้ง่าย อย่างไรก็ตาม ไม่เหมือนกับค่าเริ่มต้น ตารางนี้สืบทอดการเปลี่ยนแปลงในแถว คอลัมน์ และช่องว่าง พิจารณาตัวอย่างด้านล่าง:
- เราแทนที่จำนวนคอลัมน์เริ่มต้นด้วยตัวแปร CSS ในเครื่อง
--bs-columns: 3
: - ในคอลัมน์อัตโนมัติแรก จำนวนคอลัมน์จะสืบทอดมา และแต่ละคอลัมน์จะเท่ากับหนึ่งในสามของความกว้างที่มีอยู่
- ในคอลัมน์อัตโนมัติที่สอง เราได้รีเซ็ตจำนวนคอลัมน์ที่ซ้อนกัน
.grid
เป็น 12 (ค่าเริ่มต้นของเรา) - คอลัมน์อัตโนมัติที่สามไม่มีเนื้อหาที่ซ้อนกัน
ในทางปฏิบัติ วิธีนี้ช่วยให้มีเลย์เอาต์ที่กำหนดเองและซับซ้อนมากขึ้นเมื่อเปรียบเทียบกับระบบกริดเริ่มต้นของเรา
<div class="grid" 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 ในเครื่อง
ตัวแปร | ค่าทางเลือก | คำอธิบาย |
---|---|---|
--bs-rows |
1 |
จำนวนแถวในเทมเพลตกริดของคุณ |
--bs-columns |
12 |
จำนวนคอลัมน์ในเทมเพลตกริดของคุณ |
--bs-gap |
1.5rem |
ขนาดของช่องว่างระหว่างคอลัมน์ (แนวตั้งและแนวนอน) |
ตัวแปร CSS เหล่านี้ไม่มีค่าเริ่มต้น แต่จะใช้ค่าทางเลือกที่ใช้จนกว่าจะมีการระบุอินสแตนซ์ในเครื่องแทน ตัวอย่างเช่น เราใช้var(--bs-rows, 1)
สำหรับแถว CSS Grid ซึ่งไม่สนใจ--bs-rows
เพราะยังไม่ได้ตั้งค่าไว้ที่ใด เมื่อเป็น.grid
เช่นนั้น อินสแตนซ์จะใช้ค่านั้นแทนค่าทางเลือก1
ของ
ไม่มีคลาสกริด
องค์ประกอบลูกทันที.grid
คือรายการกริด ดังนั้นพวกเขาจะปรับขนาดโดยไม่ต้องเพิ่ม.g-col
คลาส อย่างชัดเจน
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
คอลัมน์และช่องว่าง
ปรับจำนวนคอลัมน์และช่องว่าง
<div class="grid" 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" 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" 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
บน.grid
s แต่สามารถปรับเปลี่ยนได้ตามrow-gap
ต้องการcolumn-gap
<div class="grid" 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>
ด้วยเหตุนี้ คุณจึงสามารถมีค่าgap
s แนวตั้งและแนวนอนที่แตกต่างกัน ซึ่งสามารถใช้ค่าเดียว (ทุกด้าน) หรือค่าคู่ (แนวตั้งและแนวนอน) สามารถใช้กับรูปแบบอินไลน์สำหรับgap
หรือกับ--bs-gap
ตัวแปร CSS ของเรา
<div class="grid" 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" 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>