คุณสมบัติCSS กริดคอลัมน์
ตัวอย่าง
ทำให้ "item1" เริ่มต้นในคอลัมน์ 1 และขยาย 2 คอลัมน์:
.item1 {
grid-column: 1 / span 2;
}
ความหมายและการใช้งาน
คุณสมบัติgrid-column
ระบุขนาดและตำแหน่งของรายการกริดในเค้าโครงกริด และเป็นคุณสมบัติชวเลขสำหรับคุณสมบัติต่อไปนี้:
ค่าเริ่มต้น: | รถยนต์ / รถยนต์ |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS Grid Layout Module ระดับ 1 |
ไวยากรณ์ JavaScript: | วัตถุ .style.gridColumn="2 / ช่วง 2" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
grid-column | 57 | 16 | 52 | 10 | 44 |
ไวยากรณ์ CSS
grid-column: grid-column-start /
grid-column-end;
มูลค่าทรัพย์สิน
Value | Description |
---|---|
grid-column-start | Specifies on which column to start displaying the item. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
คุณสามารถใช้ค่าบรรทัดคอลัมน์แทนจำนวนคอลัมน์เพื่อขยาย:
.item1 {
grid-column: 1 / 3;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS Grid Layout