Thuộc tính grid-auto-rows

Thuộc tính grid-auto-rows xác định số lượng và chiều rộng của các hàng mà một phần tử sẽ chiếm trong lưới ngầm định. Lưới ngầm định - lưới được tạo ra tự động khi các phần tử vượt ra ngoài khung của lưới đã được xác định. Trong giá trị của thuộc tính, chúng ta chỉ định chiều rộng của các hàng bằng bất kỳ đơn vị kích thước nào. Thuộc tính được chỉ định trong phần tử cha và xác định chiều rộng của các hàng cho các phần tử con.

Cú pháp

cssbộ chọn {
  grid-auto-rows: chiều rộng hàng;
}

Ví dụ

Hãy xác định chiều rộng của các hàng cho các phần tử của chúng ta trong lưới ngầm định:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
  <div id="elem5">5</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-auto-rows: 40px 60px 80px;
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Xem thêm