网格行 | grid-row
grid-row是一个速记属性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;如果两个<grid-line>值，则grid-row-start将Longhand设置为斜杠之前的值，grid-row-endLonghand设置为斜杠后的值。
初始值 | 作为简写的每个属性：grid-row-start：auto grid-row-end：auto |
|---|---|
适用于 | 网格项目和绝对定位的框，其包含块是网格容器 |
遗传 | 没有 |
媒体 | 视觉 |
计算值 | as each of the properties of the shorthand: grid-row-start: as specified grid-row-end: as specified |
动画类型 | 离散的 |
规范的顺序 | the unique non-ambiguous order defined by the formal grammar |
grid-row-start*auto
grid-row-end*auto
Applies to grid items and absolutely-positioned boxes whose containing block is a grid container [Inherited](inheritance) no Media visual [Computed value](computed_value) as each of the properties of the shorthand:grid-row-start*具体规定
grid-row-end*具体规定
Animation type discrete Canonical order the unique non-ambiguous order defined by the formal grammar 句法
取值
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-line> [ / <grid-line> ]?where
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <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;
}规格
Specification | Status | Comment |
|---|---|---|
CSS Grid LayoutThe definition of 'grid-row' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 57.01 | 20 (12.10240)-ms3 | 52.0 (52.0)2 | 10.0-ms3 | 444 | 10.1 |
Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support | 57.01 | 57.01 | 52.0 (52.0)2 | 10.0-ms3 | 44 | No support |
一在实验Web平台特性旗子chrome://flags从Chrome 29.0开始。
二在偏好后面实现layout.css.grid.enabled自从壁虎40.0%28Firefox 40.0/雷鸟40.0/SeaMonkey 2.37%29，默认为false由于壁虎52.0%28Firefox 52.0/雷鸟52.0/SeaMonkey 2.49%29默认启用。
四在启用实验性Web平台特性旗子chrome://flags从歌剧28.0开始。
另见
- 相关CSS属性：
grid-row-start，，，grid-row-end，，，grid-column，，，grid-column-start，，，grid-column-end
- 网格布局指南：基于css网格的线状布局
- 视频教程：线基布置
? 2005–2017 Mozilla Developer Network and individual contributors.在CreativeCommonsAttribution-ShareAlike License v2.5或更高版本下获得许可。
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
