CSS参考手册
网格布局 | Grid Layout
网格区域 | grid-area
该grid-area
CSS属性是一个速记属性grid-row-start
,grid-column-start
,grid-row-end
并且grid-column-end
,指定范围内的网格项目的大小和位置网格行通过贡献线,跨度,或没有(自动),以它的网格布局,从而确定其边缘网格区域。
/* Keyword values */
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;
/* <custom-ident> values */
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;
/* <integer> && <custom-ident>? values */
grid-area: some-grid-area 4;
grid-area: some-grid-area 4 / 2 another-grid-area;
/* span && [ <integer> || <custom-ident> ] values */
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;
/* Global values */
grid-area: inherit;
grid-area: initial;
grid-area: unset;
如果四个<grid-line>
值被指定,grid-row-start
设置为第一个值,grid-column-start
被设置为第二个值,grid-row-end
设置为第三个值,并且grid-column-end
设置为第四个值。
当grid-column-end
被省略时,如果grid-column-start
是<custom-ident>
,grid-column-end
则被设置为<custom-ident>
; 否则,设置为auto
。
grid-row-end
被省略时,如果grid-row-start
是<custom-ident>
,grid-row-end
则被设置为<custom-ident>
; 否则,设置为auto
。
何时grid-column-start
被省略,如果grid-row-start
是<custom-ident>
,所有四个伦敦都被设置为这个值。否则,它将设置为auto
...
网格区域属性也可以设置为<custom-ident>
作为该区域的名称,然后可以使用grid-template-areas
...
初始值 |
as each of the properties of the shorthand: grid-row-start: auto grid-column-start: auto grid-row-end: auto grid-column-end: auto |
---|---|
应用于 |
grid items and absolutely-positioned boxes whose containing block is a grid container |
是否继承 |
no |
适用媒体 |
visual |
计算值 |
as each of the properties of the shorthand: grid-row-start: as specified grid-column-start: as specified grid-row-end: as specified grid-column-end: as specified |
Animation type |
discrete |
规范顺序 |
the unique non-ambiguous order defined by the formal grammar |
-
grid-row-start
*auto
-
grid-column-start
*auto
-
grid-row-end
*auto
-
grid-column-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-column-start
*具体规定
-
grid-row-end
*具体规定
-
grid-column-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-area: foo;
将选择该命名的网格区域的开始/结束边缘(除非在其之前明确指定了另一个名为foo-start
/的行foo-end
)。
否则,这被视为整数1
已被指定为一起<custom-ident>
。
<integer> && <custom-ident>?
将_n_th网格线贡献给网格项目的位置。如果给出了一个负整数,则反向计数,从显式网格的末端开始。
如果名称被指定为<custom-ident>
,只有具有该名称的行才会被计算在内。如果没有足够的名称行存在,则假定所有隐式网格行都具有该名称,以便找到该位置。
<integer>
为0
是无效的。
span && [ <integer> || <custom-ident> ]
为网格项的放置提供网格跨度,因此网格项的网格区域的对应边缘是n从相反的边缘来的线。
如果名称被指定为<custom-ident>
,只有具有该名称的行才会被计算在内。如果没有足够的名称行存在,则在与搜索方向对应的显式网格一侧的所有隐式网格线都假定具有该名称,以便计算此跨度。
如果<integer>
则默认为1
负整数或0无效。
形式语法
<grid-line> [ / <grid-line> ]{0,3}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: 100px;
grid-template: repeat(4, 1fr) / 50px 100px;
}
#item1 {
background-color: lime;
grid-area: 2 / 2 / auto / span 3;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: blue;
}
规格
Specification |
Status |
Comment |
---|---|---|
CSS Grid LayoutThe definition of 'grid-area' in that specification. |
Candidate Recommendation |
Initial definition |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support |
57.01 |
No support3 |
52.0 (52.0)2 |
No support3 |
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 |
No support3 |
44 |
No support |
网格布局 | Grid Layout相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。