grid-template-rows

尝试一下

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: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
}

语法

/* Keyword value */
grid-template-rows: none;

/* <track-list> values */
grid-template-rows: 100px 1fr;
grid-template-rows: [linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);

/* <auto-track-list> values */
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-rows:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-rows:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

/* Global values */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: unset;

该属性可能包含如下值：

• 关键字 none
• 或者 <track-list> 值
• 或者 <auto-track-list> 值。

值

none

这个关键字表示不明确的网格。所有的行和其大小都将由grid-auto-rows 属性隐式的指定。

<length>

非负值的长度大小。

<percentage>

非负值且相对于网格容器的 <百分比>。如果网格容器的尺寸大小依赖网格轨道的大小（比如 inline-grid），则百分比值将被视为auto。 为了遵守网格的百分比，网格轨道本身定义的大小，将自动被调整为相对网格容器大小，并且是以最小量将网格轨道调整到最终的大小。

<flex>

非负值，用单位 fr 来定义网格轨道大小的弹性系数。每个定义了 <flex> 的网格轨道会按比例分配剩余的可用空间。当外层用一个 minmax() 表示时，它将是一个自动最小值 (即 minmax(auto, <flex>) ) 。

max-content

是一个用来表示以网格项的最大的内容来占据网格轨道的关键字。

min-content

是一个用来表示以网格项的最大的最小内容来占据网格轨道的关键字。

minmax(min, max)

是一个来定义大小范围的属性，大于等于 min 值，并且小于等于 max 值。如果 max 值小于 min 值，则该值会被视为 min 值。最大值可以设置为网格轨道系数值<flex> ，但最小值则不行。

Note: 该规范在将来可能会允许设置最小值为 flex ，也会调整网格轨道算法 (track sizing algorithm) 计算出正确的大小。

auto

如果该网格轨道为最大时，该属性等同于 <max-content> ，为最小时，则等同于 <min-content> 。

Note: 网格轨道大小为 auto (且只有为 auto ) 时，才可以被属性align-content 和 justify-content 拉伸。

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

相当于公式 min(max-content, max(auto, argument))，类似于auto 的计算 (即 minmax(auto, max-content))，除了网格轨道大小值是确定下来的，否则该值都大于 auto 的最小值。

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

表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复行的表达式。

正式语法

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>? <fixed-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>  

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

示例

CSS

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

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

HTML

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

结果

规范

浏览器兼容性

参见

• 相关 CSS 属性：grid-template-columns, grid-template-areas, grid-template
• 网格布局指南：Basic concepts of grid layout - Grid Tracks
• 视频教程：Defining a Grid