ใช้คุณสมบัติ grid-row-end เพื่อกำหนดตำแหน่งสิ้นสุดของ grid item ในแนวตั้ง (แถว) สามารถทดลองรันโค้ดตัวอย่างด้านล่างได้
ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <style> .container { display: grid; grid-auto-rows: 50px; grid-gap: 10px; background-color: red; padding: 10px; } .container>div { background-color: yellow; text-align: center; padding:10px 0; font-size: 20px; } .ele3 { grid-row-end: span 2; } </style> </head> <body> <div class = "container"> <div class = "ele1">1</div> <div class = "ele2">2</div> <div class = "ele3">3</div> <div class = "ele4">4</div> <div class = "ele5">5</div> <div class = "ele6">6</div> </div> </body> </html>
คำอธิบาย
ในตัวอย่าง item ที่ 3 (.ele3) ใช้ grid-row-end: span 2 ทำให้ขยายครอบครอง 2 แถว แทนที่จะเป็น 1 แถวตามปกติ
รูปแบบค่าที่ใช้ได้:
auto- เริ่มต้น ไม่ขยาย (ค่าเริ่มต้น)<line number>- หมายเลข grid line ที่สิ้นสุด (เช่น 3)span <number>- ขยายครอบครองจำนวนแถวที่ระบุ<custom-ident>- ชื่อ grid line ที่กำหนดเอง
คุณสมบัติที่เกี่ยวข้อง: grid-row-start, grid-column-start, grid-column-end และ shorthand grid-row, grid-column, grid-area
