CSS参考手册
网格布局 | Grid Layout
网格 | grid
grid
CSS属性是一个简写属性,并将所有明确的网格特性(grid-template-rows
,grid-template-columns
,和grid-template-areas
),所有的隐含网格属性(grid-auto-rows
,grid-auto-columns
,和grid-auto-flow
),以及排水沟性能(grid-column-gap
和grid-row-gap
在一个单一的声明)。
/* <'grid-template'> values */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
/* <'grid-template-rows'> /
[ auto-flow && dense? ] <'grid-auto-columns'>? values */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
<'grid-template-columns'> values */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
/* Global values */
grid: inherit;
grid: initial;
grid: unset;
注意:只能在单个声明中指定显式或隐式网格属性grid
。你没有指定的子属性被设置为它们的初始值,正如对于短手一样。此外,排水沟属性通过这种简写方式重置,即使它们不能被设置。
初始值 |
as each of the properties of the shorthand: grid-template-rows: none grid-template-columns: none grid-template-areas: none grid-auto-rows: auto grid-auto-columns: auto grid-auto-flow: row grid-column-gap: 0 grid-row-gap: 0 |
---|---|
应用于 |
grid containers |
是否继承 |
no |
百分比 |
as each of the properties of the shorthand: grid-template-rows: refer to corresponding dimension of the content area grid-template-columns: refer to corresponding dimension of the content area grid-auto-rows: refer to corresponding dimension of the content area grid-auto-columns: refer to corresponding dimension of the content area |
适用媒体 |
visual |
计算值 |
as each of the properties of the shorthand: grid-template-rows: as specified, but with relative lengths converted into absolute lengths grid-template-columns: as specified, but with relative lengths converted into absolute lengths grid-template-areas: as specified grid-auto-rows: the percentage as specified or the absolute length grid-auto-columns: the percentage as specified or the absolute length grid-auto-flow: as specified grid-column-gap: the percentage as specified or the absolute length grid-row-gap: the percentage as specified or the absolute length |
动画类型 |
discrete |
规范顺序 |
the unique non-ambiguous order defined by the formal grammar |
-
grid-template-rows
*none
-
grid-template-columns
*none
-
grid-template-areas
*none
-
grid-auto-rows
*auto
-
grid-auto-columns
*auto
-
grid-auto-flow
*row
-
grid-column-gap
*0
-
grid-row-gap
*0
Applies to grid containers [Inherited](inheritance) no Percentages as each of the properties of the shorthand:
-
grid-template-rows
*参考内容区域的相应维度
-
grid-template-columns
*参考内容区域的相应维度
-
grid-auto-rows
*参考内容区域的相应维度
-
grid-auto-columns
*参考内容区域的相应维度
Media visual [Computed value](computed_value) as each of the properties of the shorthand:
-
grid-template-rows
::按规定,但相对长度转换为绝对长度
-
grid-template-columns
::按规定,但相对长度转换为绝对长度
-
grid-template-areas
*具体规定
-
grid-auto-rows
*指定的百分比或绝对长度
-
grid-auto-columns
*指定的百分比或绝对长度
-
grid-auto-flow
*具体规定
-
grid-column-gap
*指定的百分比或绝对长度
-
grid-row-gap
*指定的百分比或绝对长度
Animation type discrete Canonical order the unique non-ambiguous order defined by the formal grammar
句法
取值
<'grid-template'>
定义grid-template
包括grid-template-columns
,grid-template-rows
和grid-template-areas
。<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
经由明确设置的行迹设置了一个自动流动grid-template-rows
性(和grid-template-columns
财产none
),并通过指定如何自动重复列轨道grid-auto-columns
(和设置grid-auto-rows
到auto
)。grid-auto-flow
也相应地设置column
,dense
如果指定的话。
所有其他grid
子属性被重置为它们的初始值。
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
通过设置列设置了一个自动流通过明确跟踪grid-template-columns
性能(和grid-template-rows
财产none
),并通过指定如何自动重复的行轨道grid-auto-rows
(与设置grid-auto-columns
到auto
)。grid-auto-flow
也相应地设置row
,dense
如果指定的话。
所有其他grid
子属性被重置为它们的初始值。
形式语法
<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
例
HTML内容
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS内容
#container {
display: grid;
grid: repeat(2, 60px) / auto-flow 80px;
}
#container > div {
background-color: #8ca0ff;
width: 50px;
height: 50px;
}
结果
规范
Specification |
Status |
Comment |
---|---|---|
CSS Grid LayoutThe definition of 'grid' 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 |
|
10.3 |
网格布局 | Grid Layout相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。