格列隙 | grid-column-gap (Grid Layout)

  CSS 中文开发手册

格列隙 | grid-column-gap (Grid Layout) - CSS 中文开发手册

grid-column-gap指定装饰之间的网列。

/* <length> values */
grid-column-gap: 20px;
grid-column-gap: 1em;
grid-column-gap: 3vmin;
grid-column-gap: 0.5cm;

/* <percentage> value */
grid-column-gap: 10%;

/* Global values */
grid-column-gap: inherit;
grid-column-gap: initial;
grid-column-gap: unset;

效果就像受影响的人网格线获取宽度：栅极轨道在两个网格线之间是代表它们的排水沟之间的空间。为了调整轨道尺寸，每个沟槽基本上被视为指定长度的额外轨道。负值无效。

计算值	0
应用于	grid containers
继承	no
百分比	refer to corresponding dimension of the content area
使用媒体	visual
计算值	the percentage as specified or the absolute length
动画类型	a length
规范顺序	the unique non-ambiguous order defined by the formal grammar

语法

取值

<length-percentage>分隔网格列的沟槽的宽度。

<percentage>值与元素的维度相关。

形式语法

<length-percentage>where 
<length-percentage> = <length> | <percentage>

例

HTML内容

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS内容

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  grid-column-gap: 20px;
}

#grid > div {
  background-color: lime;
}

规范

Specification	Status	Comment
CSS Grid LayoutThe definition of 'grid-column-gap' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Edge	Opera	Safari
Basic support	57.01	52.0 (52.0)2	No support3	No support3	441	No support5

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

  CSS 中文开发手册

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

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