CSS grid-column-end คุณสมบัติ
- หน้าก่อน grid-column
- หน้าต่อไป grid-column-gap
การกำหนดและการใช้งาน
grid-column-end คุณสมบัติระบุว่ารายการจะข้ามคอลัมน์เท่าไหร่ หรือจะสิ้นสุดที่เส้นคอลัมน์ (column-line) ไหน。
ดูตัวอย่างที่ท้ายของหน้า。
ดูเพิ่มเติมใน:
การเรียนรู้ CSS:CSS Grid Layout
ตัวอย่าง
ตัวอย่าง 1
ทำให้ "item1" ข้ามคอลัมน์สามคอลัมน์:
.item1 {
grid-column-end: span 3;
}
ตัวอย่าง 2
คุณสามารถใช้ค่าเส้นคอลัมน์แทนจำนวนคอลัมน์ที่ต้องการข้ามไป:
.item1 {
grid-column-end: 3;
}
ระบบภาษา CSS
grid-column-end: auto|span n|column-line;
ค่าของคุณสมบัติ
| ค่า | คำอธิบาย |
|---|---|
| auto | ค่าเริ่มต้น。รายการข้ามคอลัมน์เดียว。 |
| span n | กำหนดให้รายการข้ามคอลัมน์เท่าไหร่。 |
| column-line | กำหนดให้การแสดงผลของรายการหยุดที่คอลัมน์ไหน。 |
รายละเอียดเทคนิค
| ค่าเริ่มต้น: | auto |
|---|---|
| การสืบทอด: | ไม่ |
| การสร้างอนุรักษ์: | สนับสนุน。อ่านเพิ่มเติมใน:คุณสมบัติที่เกี่ยวกับอนุรักษ์. |
| เวอร์ชัน: | CSS Grid Layout Module Level 1 |
| ระบบแสดงทางภาษาจาวาสคริปต์: | object.style.gridColumnEnd="5" |
การสนับสนุนโปรแกรมนำ
ตารางตัวเลขระบุสำหรับเวอร์ชันบราวเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- หน้าก่อน grid-column
- หน้าต่อไป grid-column-gap
