column-gap (grid-column-gap)

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

column-gap CSS property sets the size of the gap ( gutter ) between an element's columns.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Initially a part of Multi-column Layout , the definition of column-gap has been broadened to include multiple layout methods. Now specified in Box Alignment , it may be used in Multi-column, Flexible Box, and Grid layouts.

CSS 栅格布局 initially defined the grid-column-gap property. This prefixed property is being replaced by column-gap . However, in order to support browsers that implemented grid-column-gap and not column-gap for grid, you will need to use the prefixed property.

句法

/* Keyword value */
column-gap: normal;
/* <length> values */
column-gap: 3px;
column-gap: 2.5em;
/* <percentage> value */
column-gap: 3%;
/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: unset;

column-gap property is specified as one of the values listed below.

值

normal: The browser's default spacing is used between columns. For multi-column layout this is specified as 1em . For all other layout types it is 0.
<length>: The size of the gap between columns, defined as a <length> 。 <length> property's value must be non-negative.
<percentage>: The size of the gap between columns, defined as a <percentage> 。 <percentage> property's value must be non-negative.

形式定义

初始值	`normal`
适用于	multi-column elements, flex containers, grid containers
继承	no
百分比	refer to corresponding dimension of the content area
计算值	as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
动画类型	a length , percentage or calc();

形式句法

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

范例

Flex layout

HTML

<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#flexbox {
  display: flex;
  height: 100px;
  column-gap: 20px;
}
#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: auto;
}

结果

Grid layout

HTML

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

CSS

#grid {
  grid-column-gap: 20px;
}

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  column-gap: 20px;
}
#grid > div {
  border: 1px solid green;
  background-color: lime;
}

结果

Multi-column layout

HTML

<p class="content-box">
  This is some multi-column text with a 40px column
  gap created with the CSS `column-gap` property.
  Don't you think that's fun and exciting? I sure do!
</p>

CSS

.content-box {
  column-count: 3;
  column-gap: 40px;
}

结果

规范

规范	状态	注释
CSS Box Alignment Module Level 3 The definition of 'column-gap' in that specification.	工作草案	Applies to grid and flexbox
CSS 栅格布局 The definition of 'column-gap' in that specification.	候选推荐	Specifies how this property affects grid layouts
CSS Multi-column Layout Module The definition of 'column-gap' in that specification.	工作草案	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Support in Flex layout

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Supported in Flex Layout	Chrome 完整支持 84	Edge 完整支持 84	Firefox 完整支持 63	IE 不支持 No	Opera 完整支持 70	Safari 不支持 No	WebView Android 完整支持 84	Chrome Android 完整支持 84	Firefox Android 完整支持 63	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持
不支持

Support in Grid layout

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Supported in Grid Layout	Chrome 完整支持 66 完整支持 66 完整支持 57 Alternate Name Alternate Name Uses the non-standard name: `grid-column-gap` 完整支持 29 Alternate Name Disabled Alternate Name Uses the non-standard name: `grid-column-gap` Disabled From version 29: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Edge 完整支持 16 完整支持 16 完整支持 16 Alternate Name Alternate Name Uses the non-standard name: `grid-column-gap`	Firefox 完整支持 61 完整支持 61 完整支持 52 Alternate Name Alternate Name Uses the non-standard name: `grid-column-gap` 不支持 40 — 59 Alternate Name Disabled Alternate Name Uses the non-standard name: `grid-column-gap` Disabled ). To change preferences in Firefox, visit about:config.	IE 不支持 No	Opera 完整支持 53 完整支持 53 完整支持 44 Alternate Name Alternate Name Uses the non-standard name: `grid-column-gap` 完整支持 28 Alternate Name Disabled Alternate Name Uses the non-standard name: `grid-column-gap` Disabled From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari 完整支持 12.1 完整支持 12.1 完整支持 10.1 Alternate Name Alternate Name Uses the non-standard name: `grid-column-gap`	WebView Android 完整支持 66 完整支持 66 完整支持 57 Alternate Name Alternate Name Uses the non-standard name: `grid-column-gap`	Chrome Android 完整支持 66 完整支持 66 完整支持 57 Alternate Name Alternate Name Uses the non-standard name: `grid-column-gap` 完整支持 29 Alternate Name Disabled Alternate Name Uses the non-standard name: `grid-column-gap` Disabled From version 29: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android 完整支持 61 完整支持 61 完整支持 52 Alternate Name Alternate Name Uses the non-standard name: `grid-column-gap` 不支持 40 — 59 Alternate Name Disabled Alternate Name Uses the non-standard name: `grid-column-gap` Disabled ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 47 完整支持 47 完整支持 43 Alternate Name Alternate Name Uses the non-standard name: `grid-column-gap` 完整支持 28 Alternate Name Disabled Alternate Name Uses the non-standard name: `grid-column-gap` Disabled From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari iOS 完整支持 12 完整支持 12 完整支持 10.3 Alternate Name Alternate Name Uses the non-standard name: `grid-column-gap`	Samsung Internet Android 完整支持 9.0 完整支持 9.0 完整支持 6.0 Alternate Name Alternate Name Uses the non-standard name: `grid-column-gap`

图例

完整支持
不支持
用户必须明确启用此特征。
使用非标名称。

Support in Multi-column layout

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Supported in Multi-column Layout	Chrome 完整支持 50	Edge 完整支持 12	Firefox 完整支持 52 完整支持 52 不支持 1.5 — 74 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -moz- 注意事项 Before Firefox 3, the default value for the `normal` keyword was `0` and not `1em` .	IE 完整支持 10	Opera 完整支持 37 完整支持 37 Prefixed Implemented with the vendor prefix: -webkit- 不支持 11.1 — 15	Safari 完整支持 10	WebView Android 完整支持 50	Chrome Android 完整支持 50	Firefox Android 完整支持 52 完整支持 52 完整支持 4 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android 完整支持 37 完整支持 37 Prefixed Implemented with the vendor prefix: -webkit- 不支持 11.1 — 14	Safari iOS 完整支持 10	Samsung Internet Android 完整支持 5.0
`calc()` 值	Chrome 完整支持 66	Edge 完整支持 16	Firefox 完整支持 61	IE 不支持 No	Opera 完整支持 53	Safari 不支持 No	WebView Android 完整支持 66	Chrome Android 完整支持 66	Firefox Android 完整支持 61	Opera Android 完整支持 47	Safari iOS 不支持 No	Samsung Internet Android 完整支持 9.0
`<percentage>` 值	Chrome 完整支持 66	Edge 完整支持 16	Firefox 完整支持 61	IE 不支持 No	Opera 完整支持 53	Safari 不支持 No	WebView Android 完整支持 66	Chrome Android 完整支持 66	Firefox Android 完整支持 61	Opera Android 完整支持 47	Safari iOS 不支持 No	Samsung Internet Android 完整支持 9.0

图例

完整支持
不支持
见实现注意事项。
要求使用供应商前缀或不同名称。

另请参阅

Related CSS properties: row-gap , gap
Grid Layout Guide: Basic concepts of grid layout - Gutters
Multi-column Layout Guide: Styling Columns

元数据

最后修改： Jul 16, 2020

CSS
CSS 参考
CSS Box Alignment
指南
特性
1. align-content
2. align-items
3. align-self
4. column-gap (grid-column-gap)
5. gap (grid-gap)
6. justify-content
7. justify-items
8. justify-self
9. place-content
10. place-items
11. place-self
12. row-gap (grid-row-gap)

在此页

句法

值

形式定义

形式句法

范例

Flex layout

HTML

CSS

结果

Grid layout

HTML

CSS

结果

Multi-column layout

HTML

CSS

结果

规范

浏览器兼容性

Support in Flex layout

图例

Support in Grid layout

图例

Support in Multi-column layout

图例

另请参阅

相关话题