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