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

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

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

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

CSS ต่อเนื่อง:CSS Grid Layout

ตัวอย่าง

ตัวอย่าง 1

ทำให้ "item1" เริ่มที่แถวที่ 1 และข้ามไปข้างลง 2 แถว:

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

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

ตัวอย่าง 2

คุณสามารถใช้ค่าเส้นทางแบบแบ่งเส้นทางเพื่อแทนจำนวนแถวที่ต้องการข้ามไปข้างลง:

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

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

การเขียนรหัส CSS

grid-row: grid-row-start / grid-row-end;

ค่าของแอตทริบิวต์

ค่า คำอธิบาย
grid-row-start กำหนดให้ระบุว่าจะเริ่มแสดงรายการจากแถวที่ไหน。
grid-row-end กำหนดให้ระบุว่าจะหยุดแสดงรายการบนเส้นทางแบบแบ่งเส้นทางหรือข้างไปข้างลงหลายแถว。

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

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

การสนับสนุนโปรแกรมนำทาง

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

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