grid-row

版本： CSS3

grid-row 属性是一种 grid-row-start 和 grid-row-end 的缩写（shorthand）形式，它定义了网格单元与网格行（row）相关的尺寸和位置，可以通过在网格布局中的基线（line），跨度（span），或者什么也不做（自动），从而指定 grid area 的行起始与行结束。

示例

/* 不同类型的属性值 */
/* Keyword values */
grid-row: auto;
grid-row: auto / auto;

/*  values */
grid-row: somegridarea;
grid-row: somegridarea / someothergridarea;

/*  +  values */
grid-row: somegridarea 4;
grid-row: 4 somegridarea / 6;

/* span +  +  values */
grid-row: span 3;
grid-row: span somegridarea;
grid-row: 5 somegridarea span;
grid-row: span 3 / 6;
grid-row: span somegridarea / span someothergridarea;
grid-row: 5 somegridarea span / 2 span;

/* Global values */
grid-row: inherit;
grid-row: initial;
grid-row: unset;

浏览器支持

IE不支持 grid-row ，其余浏览器都支持 grid-row

语法

grid-row : auto | <custom-ident>|[<integer>&&<custom-ident>?] |[ span &&[ <integer>||<custom-ident>] ]

取值

• auto ：表示对网格的布置行为不做干涉，即自动布置，自动的 span 或者默认 span 值为 1。
• <custom-ident> ：如果存在自定义的基线名（'<custom-ident>-start'/'<custom-ident>-end'），它就将第一个这样的基线贡献给网格单元。
• <integer>&&<custom-ident>? ：将第 n 条网格基线贡献给网格单元布置。如果指定的是负数，则指的是从下边界向上边界计算的反向顺序。如果提供的是<custom-ident>，那么只有以此命名的基线才会被计算。如果所命名的基线数超过了网格线数，为了找到该位置，所有隐式的网格线会被假定拥有这个命名。integer 值不能为 0。
• span &&[ <integer>||<custom-ident> ：为网格单元定义一个跨度，使得网格单元的网格区域中的一条边界远离另一条边界线 n 条基线。如果提供的是<custom-ident>，则只有以此命名的基线才会被计算。如果网格线不足，则假定与搜索方向对应的显式网格一侧的所有隐式网格线都具有该名称。如果忽略<integer>，它就默认设为 1。它的值也不能为0。

实例

#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(6, 1fr);
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-row: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-row: span 2 / 7;
}


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