CSS参考手册
网格布局 | Grid Layout
网格差距 | grid-gap
grid-gap
属性是一个简写属性grid-row-gap
/* One <length> value */
grid-gap: 20px;
grid-gap: 1em;
grid-gap: 3vmin;
grid-gap: 0.5cm;
/* One <percentage> value */
grid-gap: 16%;
grid-gap: 100%;
/* Two <length> values */
grid-gap: 20px 10px;
grid-gap: 1em 0.5em;
grid-gap: 3vmin 2vmax;
grid-gap: 0.5cm 2mm;
/* One or two <percentage> values */
grid-gap: 16% 100%;
grid-gap: 21px 82%;
/* Global values */
grid-gap: inherit;
grid-gap: initial;
grid-gap: unset;
初始值 |
作为简写的每个属性:grid-row-gap:0 grid-column-gap:0 |
---|---|
适用于 |
网格容器 |
遗传 |
没有 |
媒体 |
视觉 |
计算值 |
as each of the properties of the shorthand: grid-row-gap: the percentage as specified or the absolute length grid-column-gap: the percentage as specified or the absolute length |
动画类型 |
as each of the properties of the shorthand: grid-row-gap: a length grid-column-gap: a length |
规范的顺序 |
形式语法定义的独特的非模糊顺序 |
-
grid-row-gap
*0
-
grid-column-gap
*0
Applies to grid containers [Inherited](inheritance) no Media visual [Computed value](computed_value) as each of the properties of the shorthand:
-
grid-row-gap
*指定的百分比或绝对长度
-
grid-column-gap
*指定的百分比或绝对长度
Animation type as each of the properties of the shorthand:
-
grid-row-gap
*a长度
-
grid-column-gap
*a长度
Canonical order the unique non-ambiguous order defined by the formal grammar
语法
这个属性被指定为一个值,<'grid-row-gap'>
可以选择一个值<'grid-column-gap'>
。如果<'grid-column-gap'>
省略,则将其设置为与值相同<'grid-row-gap'>
。
<'grid-row-gap'>
和<'grid-column-gap'>
分别指定为一个<length>
或一个<percentage>
。
取值
<length>
分隔网格线的沟槽的宽度。<percentage>
分隔网格线的沟槽的宽度,相对于元素的尺寸。
形式语法
<'grid-row-gap'> <'grid-column-gap'>?
例
HTML内容
<div id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS内容
#grid {
display: grid;
height: 200px;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
grid-gap: 20px 5px;
}
#grid > div {
background-color: lime;
}
规范
Specification |
Status |
Comment |
---|---|---|
CSS Grid LayoutThe definition of 'grid-gap' 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 |
No support6 |
<percentage> value |
No support |
No support3 |
52.0 (52.0)2 |
No support3 |
No support4 |
No support6 |
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)3 |
44 |
? |
<percentage> value |
No support |
No support |
52.0 (52.0)5 |
No support |
No support |
No support |
网格布局 | Grid Layout相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。