Thuộc tính hàng mẫu lưới lưới CSS
Ví dụ
Chỉ định kích thước hàng (chiều cao):
.grid-container {
display: grid;
grid-template-rows:
100px 300px;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính grid-template-rows
chỉ định số lượng (và chiều cao) của các hàng trong bố cục lưới.
Các giá trị là một danh sách được phân tách bằng dấu cách, trong đó mỗi giá trị chỉ định chiều cao của hàng tương ứng.
Giá trị mặc định: | không có |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hìnhHãy thử nó |
Phiên bản: | Mô-đun bố cục lưới CSS cấp 1 |
Cú pháp JavaScript: | đối tượng .style.gridTemplateRows="50px 200px" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
grid-template-rows | 57 | 16 | 52 | 10 | 44 |
Cú pháp CSS
grid-template-rows: none|auto|max-content|min-content| length |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
none | No size is set. Rows are created if needed | Demo ❯ |
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 | Demo ❯ |
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 | Demo ❯ |
Trang liên quan
Hướng dẫn CSS: Bố cục lưới CSS
Tham khảo CSS: Thuộc tính cột lưới
Tham khảo CSS: Thuộc tính Grid-template