grid-auto-rows

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

CSS 属性 grid-auto-rows 用于指定隐式创建的行轨道大小。

尝试一下

grid-auto-rows: auto;

grid-auto-rows: 50px;

grid-auto-rows: min-content;

grid-auto-rows: minmax(30px, auto);

<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-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  font-size: 22px;
}

#example-element div:last-child {
  font-size: 13px;
}

如果定位到某行中的网格元素没有使用 grid-template-rows来指定大小，则会隐式创建grid 轨道来保存它。这可能在显示定位到超出范围的行，或者由自动放置算法创建额外的行时发生。

语法

css
/* Keyword values */
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;

/* <length> values */
grid-auto-rows: 100px;
grid-auto-rows: 20cm;
grid-auto-rows: 50vmax;

/* <percentage> values */
grid-auto-rows: 10%;
grid-auto-rows: 33.3%;

/* <flex> values */
grid-auto-rows: 0.5fr;
grid-auto-rows: 3fr;

/* minmax() values */
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: minmax(20%, 80vmax);

/* multiple track-size values */
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

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

取值

<length>

一个非负的长度。

<percentage>

相对于网格窗口块尺寸的非负 <percentage> 值。如果网格容器的块尺寸是不确定的，则百分比值将被视为 auto。

<flex>

非负的、以 fr 为单位的维度指定轨道的弹性因子。每个 <flex>-尺寸的轨道都按其弹性因子的比例挤占剩余空间的一部分。

当使用在 minmax() 符号外时，意味着最小值为 auto (例： minmax(auto, <flex>)).

max-content

关键词，指明由网格元素中占用空间最大的那一个来决定轨道的尺寸。

min-content

关键词，指明由网格元素中占用空间最小的那一个来决定轨道的尺寸。

minmax(min, max)

函数符号，定义一个不小于min且不大于max的尺寸范围。如果max比min小，则max会被忽略，函数会被录作min处理。作为最大值，<flex> 值设置了轨道的弹性因子。作为最小值，会被当作 0 处理（或者最小内容——当网格容器指定了尺寸为最小内容）。

auto

关键字，当用来指定最大值时与最大内容一致，当用来指定最小值时，它表示轨道中所有网格元素最小尺寸中的最大值（由min-width/min-height指定）。

注意：auto 轨道尺寸（且仅有 auto 轨道尺寸）可配合align-content 和justify-content 属性使用。

形式语法

grid-auto-rows = 
  <track-size>+  

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

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

示例

HTML

html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS

css
#grid {
  width: 200px;
  display: grid;
  grid-template-areas: "a a";
  grid-gap: 10px;
  grid-auto-rows: 100px;
}

#grid > div {
  background-color: lime;
}

规范

Specification
CSS Grid Layout Module Level 2
# auto-tracks
初始值auto
适用元素网格容器
是否是继承属性否
Percentagesrefer to corresponding dimension of the content area
计算值the percentage as specified or the absolute length
动画类型按计算值的类型

浏览器兼容性

参见