非常教程

CSS参考手册

网格布局 | Grid Layout

网格行 | grid-row

grid-row是一个速记属性grid-row-startgrid-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默认启用。

三Internet Explorer实现了规范的旧版本,它只定义grid-cell,一grid-row-span和一个grid-column-span属性,并使用-MS前缀。因此,属性的一部分在那里实现为-ms-grid-cell,,,-ms-grid-row-span-ms-grid-column-span分别。

四在启用实验性Web平台特性旗子chrome://flags从歌剧28.0开始。

另见

  • 相关CSS属性:grid-row-start,,,grid-row-end,,,grid-column,,,grid-column-start,,,grid-column-end
  • 网格布局指南:基于css网格的线状布局
  • 视频教程:线基布置

在MDN上编辑此页面

 © 2005–2017 Mozilla Developer Network and individual contributors.

在CreativeCommonsAttribution-ShareAlike License v2.5或更高版本下获得许可。

https://developer.mozilla.org/en-US/docs/web/css/Grid-row

网格布局 | Grid Layout相关

1.网格 | CSS Grid
2.网格布局 | CSS Grid Layout
3.网格布局中自动放置 | CSS Grid Layout: Auto-placement in CSS Grid Layout
4.网格布局的基础知识 | CSS Grid Layout: Basic Concepts of Grid Layout
5.网格布置中的框对齐方式 | CSS Grid Layout: Box Alignment in CSS Grid Layout
6.网格布局和渐进增强 | CSS Grid Layout: CSS Grid and Progressive Enhancement
7.网格布局和辅助功能 | CSS Grid Layout: CSS Grid Layout and Accessibility
8.网格,逻辑值和写入模式 | CSS Grid Layout: CSS Grid, Logical Values and Writing Modes
9.网格模板区 | CSS Grid Layout: Grid Template Areas
10.使用命名网格线进行布局 | CSS Grid Layout: Layout using Named Grid Lines
11.语言 编辑 高级 使用CSS网格进行基于行的放置 | CSS Grid Layout: Line-based Placement with CSS Grid
12.使用CSS网格布局实现常见布局 | CSS Grid Layout: Realising common layouts using CSS Grid
13.使用CSS网格布局实现常见布局 | CSS Grid Layout: Realizing common layouts using CSS Grid Layout
14.网格布局与其他布局方法的关系 | CSS Grid Layout: Relationship of Grid Layout
15.适合内容 | fit-content
16.flex value
17.网格 | grid
18.网格区域 | grid-area
19.网格自动列 | grid-auto-columns
20.网格自动流 | grid-auto-flow
21.网格自动行 | grid-auto-rows
22.网格列 | grid-column
23.格列端 | grid-column-end
24.格列隙 | grid-column-gap
25.格列开始 | grid-column-start
26.网格差距 | grid-gap
27.网格行结束 | grid-row-end
28.格列隙 | grid-row-gap
29.格行开始 | grid-row-start
30.网格模板 | grid-template
31.网格模板区 | grid-template-areas
32.网格模板列 | grid-template-columns
33.网格模板行 | grid-template-rows
34.设置最小值 最大值函数 | minmax
35.重复 | repeat
CSS

层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS目录

1.动画和转换 | Animations & Transitions
2.背景和边框 | Backgrounds & Borders
3.基本框模型 | Basic Box Model
4.基本用户界面 | Basic User Interface
5.框对齐 | Box Alignment
6. 级联和继承 | Cascading & Inheritance
7.颜色 | Color
8. 合成与混合 | Compositing & Blending
9.条件和规则 | Conditional Rules
10.计数器样式 | Counter Styles
11.设备适配 | Device Adaptation
12.扩展 | Extensions
13.滤镜效果 | Filter Effects
14.灵活的框布局 | Flexible Box Layout
15.字体 | Fonts
16.片段模块 | Fragmentation
17.全屏 API | Fullscreen API
18. 生成内容 | Generated Content
19.网格布局 | Grid Layout
20.图像值 | Image Values
21.初始线格局 | Inline Layout
22.列表和计数器 | Lists & Counters
23.逻辑属性 | Logical Properties
24.面具 | Masking
25.媒体查询 | Media Queries
26.杂项 | Miscellaneous
27.Miscellaneous Level 1
28.Miscellaneous Level 2
29.运动路径 | Motion Path
30. 多列布局 | Multi-column Layout
31.命名空间 | Namespaces
32.项目模型 | Object Model View
33.网页媒体 | Paged Media
34.定位布局 | Positioned Layout
35.伪元素 | Pseudo-
36.节奏大小 | Rhythmic Sizing
37. Ruby布局 | Ruby Layout
38.可缩放矢量图形 | Scalable Vector Graphics
39.滚动快照 | Scroll Snap
40.选择 | Selectors
41.形状 | Shapes
42.文本 | Text
43.文字装饰 | Text Decoration
44.变换 | Transforms
45.值和单位 | Values & Units
46.变量 | Variables
47.写入模型 | Writing Modes
48.CSS 教程
49.CSS 创建
50.CSS Id 和 Class选择器
51.CSS 简介
52.CSS 盒子模型
53.CSS Table(表格)
54.CSS 列表样式(ul)
55.CSS 链接(link)
56.CSS Fonts(字体)
57.CSS Text(文本)
58.CSS Backgrounds(背景)
59.CSS Display(显示) 与 Visibility(可见性)
60.CSS 尺寸 (Dimension)
61.CSS 分组和嵌套
62.CSS 轮廓(outline)属性
63.CSS Border(边框)
64.CSS 图像透明/不透明
65.CSS 导航栏
66.CSS 伪元素
67.CSS 伪类
68.CSS Float(浮动)
69.CSS Position(定位)
70.CSS 总结
71.CSS 属性选择器
72.CSS 媒体类型
73.CSS 图像拼合技术
74.CSS 实例
75.CSS 组合选择符
76.响应式 Web 设计 – 框架
77.响应式 Web 设计 – 视频(Video)
78.CSS 提示工具(Tooltip)
79.CSS 布局 Overflow
80.CSS 计数器
81.CSS 表单