当前位置：文江博客知识库简体中文文档 Web CSS grid-row

grid-row - CSS（层叠样式表）编辑

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

如果指定了两个 <grid-line> 值，那么斜杠号前的值就被指定为 grid-row-start，斜杠后面的值就被指定为 grid-row-end 的值。

语法

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

/* <custom-ident> values */
grid-row: somegridarea;
grid-row: somegridarea / someothergridarea;

/* <integer> + <custom-ident> values */
grid-row: somegridarea 4;
grid-row: 4 somegridarea / 6;

/* span + <integer> + <custom-ident> 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;

值

auto

表示对网格的布置行为不做干涉，即自动布置，自动的 span 或者默认 span 值为 1。

<custom-ident>

如果存在自定义的基线名（'<custom-ident>-start'/'<custom-ident>-end'），它就将第一个这样的基线贡献给网格单元。

注意: 被命名的网格区域（grid areas）会自动生成隐式的被命名的基线，因此指定 grid-row: foo; 将会选择这个命名区域的开始和结束的边界（除非在它之前存在显式指定的以 foo-start/foo-end 命名的其他基线）。

否则，它就会被当作整数 1 与 <custom-ident> 一起指定。

<integer> && <custom-ident>?

将第 n 条网格基线贡献给网格单元布置。如果指定的是负数，则指的是从下边界向上边界计算的反向顺序。如果提供的是 <custom-ident>，那么只有以此命名的基线才会被计算。如果所命名的基线数超过了网格线数，为了找到该位置，所有隐式的网格线会被假定拥有这个命名。

integer 值不能为 0。

span && [ <integer> || <custom-ident> ]

为网格单元定义一个跨度，使得网格单元的网格区域中的一条边界远离另一条边界线 n 条基线。如果提供的是 <custom-ident>，则只有以此命名的基线才会被计算。如果网格线不足，则假定与搜索方向对应的显式网格一侧的所有隐式网格线都具有该名称。

如果忽略 <integer> ，它就默认设为 1。它的值也不能为0。

形式语法

<grid-line> [ / <grid-line> ]?where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

示例

HTML Content

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

CSS Content

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

IE 中的问题

IE11 不支持网格单元的自动布置。除非显式地注释 -ms-grid-column 和 -ms-grid-row，否则所有单元都会在网格的第一行/列结束。这里有一个使用 JavaScript 提供自动注释的工具：source repository.

规范

Specification	Status	Comment
CSS Grid Layout grid-row	Candidate Recommendation	Initial definition

初始值	as each of the properties of the shorthand: `grid-row-start`: `auto` `grid-row-end`: `auto`
适用元素	grid items and absolutely-positioned boxes whose containing block is a grid container
是否是继承属性	否
计算值	as each of the properties of the shorthand: `grid-row-start`: as specified `grid-row-end`: as specified
Animation type	discrete

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.