CSS ความหลากหลายgrid-column

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

คุณสมบัติ grid-column กำหนดขนาดขององค์ประกอบเครืองข่ายและตำแหน่งของมันในการจัดเครืองข่าย มันเป็นคุณสมบัติที่ย่อของคุณสมบัติต่อไปนี้:

ดูเพิ่มเติม:

การเรียนรู้ CSS:การจัดการเครืองข่าย CSS

ตัวอย่าง

ตัวอย่าง 1

ทำให้ "item1" ในคอลัมน์ที่ 1 และข้ามไปทั้งหมด 2 คอลัมน์:

.item1 {
  grid-column: 1 / span 2;
}

ลองทดลองเอง

ตัวอย่าง 2

คุณสามารถใช้ค่าของสายคอลัมน์แทนจำนวนคอลัมน์ที่ต้องการข้ามไป。

.item1 {
  grid-column: 1 / 3;
}

ลองทดลองเอง

การใช้งานภาษา CSS

grid-column: grid-column-start / grid-column-end;

ค่านิยาม

ค่า การอธิบาย
grid-column-start กำหนดจากคอลัมน์ที่เริ่มแสดงผลของสิ่งที่ต้องการ。
grid-column-end กำหนดให้การแสดงผลของสิ่งที่ต้องการหยุดแสดงบนรายการสายคอลัมน์ (column-line) หรือข้ามเลขคอลัมน์เท่าไหร่。

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

ค่าเริ่มต้น: auto / auto
การสืบทอด: ไม่
การสร้างแอนิเมชัน: การสนับสนุน。คุณสมบัติที่เกี่ยวกับอนุภาคเรียกดูแอนิเมชัน。
รุ่น: CSS Grid Layout Module Level 1
การใช้งานภาษา JavaScript: object.style.gridColumn="2 / span 2"

การสนับสนุนโปรแกรมนี้

ตารางหลักฐานในระบบนี้ระบุสำหรับรุ่นที่ใช้งานได้ทั้งหมดของอุปกรณ์ที่สนับสนุนคุณสมบัตินี้。

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