grid-template-rows

Try it

grid-template-rows: auto;

grid-template-rows: 40px 4em 40px;

grid-template-rows: 1fr 2fr 1fr;

grid-template-rows: 3ch auto minmax(10px, 60px);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  width: 200px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Cú pháp

/* Giá trị từ khóa */
grid-template-rows: none;

/* Giá trị <track-list> */
grid-template-rows: 100px 1fr;
grid-template-rows: [line-name] 100px;
grid-template-rows: [line-name1] 100px [line-name2 line-name3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);
grid-template-rows: subgrid;
grid-template-rows: masonry;

/* Giá trị <auto-track-list> */
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-rows:
  [line-name1] 100px [line-name2]
  repeat(auto-fit, [line-name3 line-name4] 300px)
  100px;
grid-template-rows:
  [line-name1 line-name2] 100px
  repeat(auto-fit, [line-name1] 300px) [line-name3];

/* Giá trị toàn cục */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: revert;
grid-template-rows: revert-layer;
grid-template-rows: unset;

Thuộc tính này có thể được chỉ định là:

• từ khóa none
• hoặc giá trị <track-list>
• hoặc giá trị <auto-track-list>.

Giá trị

none

Từ khóa chỉ ra rằng không có lưới tường minh. Tất cả các hàng sẽ được tạo ẩn và kích thước của chúng sẽ được xác định bởi thuộc tính grid-auto-rows.

[line-name]

Một <custom-ident> chỉ định tên cho đường ở vị trí đó. Định danh có thể là bất kỳ chuỗi hợp lệ nào ngoài các từ dành riêng span và auto. Các đường có thể có nhiều tên cách nhau bởi dấu cách trong dấu ngoặc vuông, ví dụ [line-name-a line-name-b].

<length>

Một độ dài không âm.

<percentage>

Một giá trị <percentage> không âm, tương đối so với kích thước block của vùng chứa lưới. Nếu kích thước vùng chứa lưới phụ thuộc vào kích thước của các track, trình duyệt xử lý phần trăm như auto cho mục đích tính kích thước nội tại của vùng chứa lưới. Phần trăm sau đó được giải quyết dựa trên kích thước vùng chứa lưới kết quả để bố cục lưới và các phần tử của nó. Trình duyệt có thể điều chỉnh đóng góp kích thước nội tại của track vào kích thước vùng chứa lưới và có thể tăng kích thước cuối cùng của track bằng lượng tối thiểu để thỏa mãn phần trăm đó.

<flex>

Một đơn vị không âm với đơn vị fr chỉ định hệ số flex của track. Mỗi track có kích thước <flex> chiếm một phần không gian còn lại tỷ lệ với hệ số flex của nó. Khi xuất hiện ngoài ký hiệu minmax(), nó ngụ ý một giá trị tối thiểu tự động (tức là minmax(auto, <flex>)).

max-content

Từ khóa đại diện cho đóng góp nội dung tối đa lớn nhất của các phần tử lưới chiếm track lưới.

min-content

Từ khóa đại diện cho đóng góp nội dung tối thiểu lớn nhất của các phần tử lưới chiếm track lưới.

minmax(min, max)

Ký hiệu hàm định nghĩa khoảng kích thước, lớn hơn hoặc bằng min, và nhỏ hơn hoặc bằng max. Nếu max nhỏ hơn min, thì max bị bỏ qua và hàm được xử lý như min. Là giá trị tối đa, một giá trị <flex> đặt hệ số flex của track. Không hợp lệ khi là giá trị tối thiểu.

auto

Là giá trị tối đa, đại diện cho kích thước max-content lớn nhất của các phần tử trong track đó.

Là giá trị tối thiểu, đại diện cho kích thước tối thiểu lớn nhất của các phần tử trong track đó (được chỉ định bởi các thuộc tính min-width/min-height của các phần tử). Điều này thường tương ứng với kích thước min-content, nhưng không phải lúc nào cũng vậy.

Nếu được dùng ngoài ký hiệu minmax(), auto đại diện cho khoảng giữa giá trị tối thiểu và tối đa được mô tả ở trên. Trong hầu hết các trường hợp, điều này hoạt động tương tự như minmax(min-content,max-content).

Note: Kích thước track auto (và chỉ kích thước track auto) có thể được kéo dãn bởi các thuộc tính align-content và justify-content. Do đó, mặc định, một track có kích thước auto sẽ chiếm bất kỳ không gian còn lại nào trong vùng chứa lưới.

fit-content( [ <length> | <percentage> ] )

Biểu diễn công thức min(max-content, max(auto, argument)), được tính toán tương tự như auto (tức là minmax(auto, max-content)), ngoại trừ kích thước track bị giới hạn ở argument nếu nó lớn hơn giá trị tối thiểu auto.

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

Biểu diễn một đoạn lặp của danh sách track, cho phép viết gọn hơn một số lượng lớn các hàng có mẫu lặp lại.

masonry

Chỉ ra rằng trục này nên được bố cục theo thuật toán masonry.

subgrid

Chỉ ra rằng lưới sẽ áp dụng phần span của lưới cha trên trục đó. Thay vì được chỉ định rõ ràng, kích thước của các hàng/cột lưới sẽ được lấy từ định nghĩa của lưới cha.

Định nghĩa hình thức

Cú pháp hình thức

grid-template-rows = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<track-list> = 
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?  

<auto-track-list> = 
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?  

<line-name-list> = 
  [ <line-names> | <name-repeat> ]+  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

<integer> = 
  <number-token>  

<fixed-breadth> = 
  <length-percentage [0,∞]>  

Ví dụ

Chỉ định kích thước hàng lưới

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

CSS

#grid {
  display: grid;
  height: 100px;
  grid-template-rows: 30px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

Kết quả

Đặc tả

Tương thích trình duyệt

Xem thêm

• grid-template-columns
• grid-template-areas
• grid-template
• Khái niệm cơ bản của bố cục lưới: track lưới
• Video: Defining a grid
• Subgrid