CSS grid-gap พฤติกรรม

การกำหนดและการใช้งาน

คุณสมบัติ grid-gap กำหนดขนาดช่องว่างระหว่างแถวและคอลัมน์ในโครงรูปแบบเครือง CSS มันเป็นคุณสมบัติย่อยของคุณสมบัติต่อไปนี้:

注意：คุณสมบัตินี้ถูกเปลี่ยนชื่อเป็น gap。

อ่านเพิ่มเติมที่：

ตัวอย่าง CSSเครือง CSS

คู่มืออ้างอิง CSSคุณสมบัติ grip-row-gap

คู่มืออ้างอิง CSSคุณสมบัติ grip-column-gap

ตัวอย่าง

ตัวอย่าง 1

ตั้งช่องว่างแบบลดทอนระหว่างแถวและคอลัมน์เป็น 50 พิกเซล：

.grid-container {
  grid-gap: 50px;
}

ลองด้วยตัวเอง

ตัวอย่าง 2

ตั้งช่องว่างแถวเป็น 20 พิกเซล และช่องว่างคอลัมน์เป็น 50 พิกเซล：

.grid-container {
  grid-gap: 20px 50px;
}

ลองด้วยตัวเอง

การเขียน CSS

grid-gap: grid-row-gap grid-column-gap;

ค่าของคุณสมบัติ

ค่า บรรยาย
grid-row-gap ตั้งขนาดของช่องว่างบรรยายระหว่างแถวในโครงรูปแบบเครือง CSS คือ 0。
grid-column-gap ตั้งขนาดของช่องว่างคอลัมน์。ค่าเริ่มต้นคือ 0。

รายละเอียดเทคนิค

ค่าเริ่มต้น： 0 0
การสืบทอด： ไม่
การสร้างอนุรักษ์： สนับสนุน。อ่านเพิ่มเติมที่：คุณสมบัติที่เกี่ยวกับอนุรักษ์。
เวอร์ชั่น： CSS Grid Layout Module ระดับ 1
JavaScript การเขียน object.style.gridGap="50px 100px"

การสนับสนุนโปรแกรมน่าเชื่อถือ

ตัวเลขในตารางระบุเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้เต็มทั้งหมด。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44