คุณสมบัติกริดช่องว่าง CSS
ตัวอย่าง
กำหนดช่องว่างระหว่างแถวและคอลัมน์เป็น 50px:
.grid-container {
grid-gap: 50px;
}
ความหมายและการใช้งาน
คุณสมบัติgrid-gap
กำหนดขนาดของช่องว่างระหว่างแถวและคอลัมน์ในรูปแบบกริด และเป็นคุณสมบัติชวเลขสำหรับคุณสมบัติต่อไปนี้:
หมายเหตุ:คุณสมบัตินี้ถูกเปลี่ยนชื่อเป็นCSS3
gap
ค่าเริ่มต้น: | 0 0 |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS Grid Layout Module ระดับ 1 |
ไวยากรณ์ JavaScript: | วัตถุ .style.gridGap="50px 100px" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
grid-gap | 57 | 16 | 52 | 10 | 44 |
ไวยากรณ์ CSS
grid-gap: grid-row-gap grid-column-gap;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
grid-row-gap | Sets the size of the gap between the rows in a grid layout. 0 is the default value | |
grid-column-gap | Sets the size of the gap between the columns in a grid layout. 0 is the default value |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
กำหนดช่องว่างระหว่างแถวเป็น 20px และคอลัมน์เป็น 50px:
.grid-container {
grid-gap: 20px 50px;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS Grid Layout
การอ้างอิง CSS: คุณสมบัติgrid -row-gap
การอ้างอิง CSS: คุณสมบัติgrid -column-gap