1. Web
  2. CSS
  3. grid-template-rows

grid-template-rows

Baseline 广泛可用 *

此功能已非常成熟，可在多种设备和浏览器版本上使用。自 2017 年 10 月以来，它已在各大浏览器中可用。

* 此特性的某些部分可能存在不同级别的支持。

grid-template-rows CSS 属性定义了网格行的行名称和轨道尺寸函数。

试一试

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

语法

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

/* <track-list> values */
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;

/* <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:
  [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];

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

此属性可以指定为

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

值

none

一个关键字，表示没有明确的网格。任何行都将隐式生成，其大小将由 grid-auto-rows 属性确定。

[line-name]

一个 <custom-ident>，指定该位置行的名称。该标识符可以是任何有效的字符串，但保留字 span 和 auto 除外。行可以有多个名称，在方括号内用空格分隔，例如 [line-name-a line-name-b]。

<length>

一个非负长度。

<percentage>

一个非负的 <percentage> 值，相对于网格容器的块大小。如果网格容器的大小取决于其轨道的大小，则浏览器在计算网格容器的固有大小时将百分比视为 auto。然后，将百分比根据生成的网格容器大小解析，以布局网格及其项目。浏览器可以调整轨道对网格容器大小的固有大小贡献，并且可以通过最小量增加轨道的最终大小，这将导致百分比得到遵守。

<flex>

一个带有单位 fr 的非负尺寸，指定轨道的弹性因子。每个 <flex> 大小的轨道根据其弹性因子按比例分配剩余空间。当出现在 minmax() 表示法之外时，它表示一个自动最小值（即 minmax(auto, <flex>)）。

max-content

一个关键字，表示占用网格轨道的网格项目的最大内容贡献的最大值。

min-content

一个关键字，表示占用网格轨道的网格项目的最小内容贡献的最大值。

minmax(min, max)

一个函数表示法，定义一个大小范围，大于或等于 min，小于或等于 max。如果 max 小于 min，则忽略 max，函数被视为 min。作为最大值，<flex> 值设置轨道的弹性因子。它作为最小值是无效的。

auto

作为最大值，它表示该轨道中项目的最大 max-content 大小。

作为最小值，它表示该轨道中项目的最大最小尺寸（由项目的 min-width/min-height 属性指定）。这通常对应于 min-content 大小，但并非总是如此。

如果在 minmax() 表示法之外使用，auto 表示上述最小值和最大值之间的范围。在大多数情况下，这与 minmax(min-content,max-content) 的行为类似。

注意： auto 轨道大小（且仅 auto 轨道大小）可以通过 align-content 和 justify-content 属性进行拉伸。因此，默认情况下，自动大小的轨道将占用网格容器中的任何剩余空间。

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

表示公式 min(max-content, max(auto, argument))，其计算方式类似于 auto（即 minmax(auto, max-content)），但如果轨道大小大于 auto 最小值，则将其钳制在 argument。

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

表示轨道列表的重复片段，允许以更紧凑的形式编写大量具有重复模式的行。

masonry

指示此轴应根据砌体算法进行布局。

subgrid

指示网格将采用其父网格在该轴上的跨越部分。网格行/列的大小将从父网格的定义中获取，而不是明确指定。

正式定义

初始值none
应用于网格容器
继承性否
百分比参照内容区域的相应维度
计算值按指定值，但相对长度会转换为绝对长度。
动画类型长度、百分比或 calc 的简单列表，前提是唯一的差异在于列表中长度、百分比或 calc 组件的值

正式语法

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,∞]>

示例

指定网格行大小

HTML

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

CSS

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

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

结果

规范

规范
CSS 网格布局模块 Level 2
# track-sizing
CSS 网格布局模块 Level 2
# subgrids

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者 于 修改。

在 GitHub 上查看此页面 • 报告此内容问题
© . Content available under a Creative Commons license.