grid-row
grid-row 是一个 CSS 简写属性，它通过为网格项的网格定位贡献一条线、一个跨度或不贡献任何内容（自动），来指定网格项在网格行中的大小和位置，从而指定其网格区域的行内开始和行内结束边缘。
试一试
grid-row: 1;
grid-row: 1 / 3;
grid-row: 2 / -1;
grid-row: 1 / span 2;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">One</div>
<div>Two</div>
<div>Three</div>
</div>
</section>
.example-container {
border: 1px solid #c5c5c5;
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
grid-template-rows: repeat(3, minmax(40px, auto));
grid-gap: 10px;
width: 200px;
}
.example-container > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
}
#example-element {
background-color: rgb(255 0 200 / 0.2);
border: 3px solid rebeccapurple;
}
构成属性
此属性是以下 CSS 属性的简写：
语法
/* Keyword values */
grid-row: auto;
grid-row: auto / auto;
/* <custom-ident> values */
grid-row: some-grid-area;
grid-row: some-grid-area / some-other-grid-area;
/* <integer> + <custom-ident> values */
grid-row: some-grid-area 4;
grid-row: 4 some-grid-area / 6;
/* span + <integer> + <custom-ident> values */
grid-row: span 3;
grid-row: span some-grid-area;
grid-row: 5 some-grid-area span;
grid-row: span 3 / 6;
grid-row: span some-grid-area / span some-other-grid-area;
grid-row: 5 some-grid-area span / 2 span;
/* Global values */
grid-row: inherit;
grid-row: initial;
grid-row: revert;
grid-row: revert-layer;
grid-row: unset;
此属性指定为一个或两个 <grid-line> 值。
如果给出两个 <grid-line> 值，它们之间用 / 分隔。斜杠前的值设置为 grid-row-start 简写属性，斜杠后的值设置为 grid-row-end 简写属性。
每个 <grid-line> 值可以指定为
- 要么是
auto关键字 - 要么是
<custom-ident>值 - 要么是
<integer>值 - 要么是
<custom-ident>和<integer>，两者用空格分隔 - 要么是关键字
span以及<custom-ident>或<integer>，或两者都有。
值
auto-
是一个关键字，表示该属性对网格项的放置不作任何贡献，表示自动放置、自动跨度或默认跨度为
1。 <custom-ident>-
如果存在一个名为
<custom-ident>-start/<custom-ident>-end的命名线，它将贡献第一条这样的线到网格项的定位中。注意：命名的网格区域会自动生成这种形式的隐式命名线，因此指定
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-row =
<grid-line> [ / <grid-line> ]?
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
示例
设置网格行的大小和位置
HTML
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
CSS
#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;
}
结果
规范
| 规范 |
|---|
| CSS 网格布局模块 Level 2 # placement-shorthands |
浏览器兼容性
加载中…