网格差距 | grid-gap (Grid Layout)

  CSS 中文开发手册

网格差距 | grid-gap (Grid Layout) - CSS 中文开发手册

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*0grid-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

  CSS 中文开发手册

  本文标题：网格差距 | grid-gap (Grid Layout) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32185.html