CSS grid-template-rowsคุณสมบัติ
ตัวอย่าง
ระบุขนาดแถว (ความสูง):
.grid-container {
display: grid;
grid-template-rows:
100px 300px;
}
ความหมายและการใช้งาน
คุณสมบัติgrid-template-rows
ระบุจำนวน (และความสูง) ของแถวในรูปแบบกริด
ค่าต่างๆ เป็นรายการที่คั่นด้วยช่องว่าง โดยที่แต่ละค่าจะระบุความสูงของแถวที่เกี่ยวข้อง
ค่าเริ่มต้น: | ไม่มี |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS Grid Layout Module ระดับ 1 |
ไวยากรณ์ JavaScript: | วัตถุ .style.gridTemplateRows="50px 200px" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
grid-template-rows | 57 | 16 | 52 | 10 | 44 |
ไวยากรณ์ CSS
grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
none | No size is set. Rows are created if needed | |
auto | The size of the rows is determined by the size of the container, and on the size of the content of the items in the row | |
max-content | Sets the size of each row to depend on the largest item in the row | |
min-content | Sets the size of each row to depend on the smallest item in the row | |
length | Sets the size of the rows, by using a legal length value. Read about length units |
หน้าที่เกี่ยวข้อง
บทช่วยสอน CSS: เค้าโครงตาราง CSS
การอ้างอิง CSS: คุณสมบัติกริดคอลัมน์
การอ้างอิง CSS: คุณสมบัติเทมเพลตกริด