Thuộc tính CSS grid-template-rows

Định nghĩa và cách sử dụng

grid-template-rows xác định số hàng (và chiều cao) trong bố cục lưới.

Giá trị là danh sách phân cách bằng khoảng trống, trong đó mỗi giá trị chỉ định chiều cao của hàng tương ứng.

Xem thêm:

Hướng dẫn CSS:Thiết kế lưới CSS

Cuốn hướng dẫn CSS:Thuộc tính grid-columns

Cuốn hướng dẫn CSS:Thuộc tính grid-template

Mẫu

Đặt kích thước hàng (chiều cao):

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

Thử ngay

Ngữ pháp CSS

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
none Chưa đặt kích thước. Tạo hàng khi cần thiết.
auto Kích thước hàng phụ thuộc vào kích thước của khay và kích thước của nội dung mục trong hàng.
max-content Đặt kích thước hàng dựa trên kích thước của mục lớn nhất trong hàng.
min-content Đặt kích thước hàng dựa trên kích thước của mục nhỏ nhất trong hàng.
length Đặt kích thước hàng thông qua việc sử dụng giá trị đo dài hợp lệ. Xem thêmĐơn vị đo dài.

Chi tiết kỹ thuật

Giá trị mặc định: none
Thừa kế: Không
Chuẩn bị animation: Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: CSS Grid Layout Module Level 1
Ngữ pháp JavaScript: object.style.gridTemplateRows="50px 200px"

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.

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