CSScolumn-gap プロパティは、要素の段又は列の間の隙間 () の寸法を設定します。

当初は段組みレイアウトの一部でしたが、 column-gap の定義は複数のレイアウト方法を含めるように拡張されました。現在はボックス配置の中で定義され、段組みレイアウト、フレキシブルボックス、グリッドレイアウトの何れかで使用されることがあります。

CSS グリッドレイアウトは当初、 grid-column-gap プロパティを定義していました。この接頭辞付きのプロパティは column-gap で置き換えられました。しかし、グリッドで grid-column-gap を実装しており column-gap を実装していないブラウザーに対応するため、上記の第二の対話型サンプルのように、接頭辞付きのプロパティを使用する必要があるでしょう。

構文

/* キーワード値 */
column-gap: normal; 

/* <length> 値 */
column-gap: 3px;
column-gap: 2.5em;

/* <percentage> 値 */
column-gap: 3%;

/* グローバル値 */
column-gap: inherit;
column-gap: initial;
column-gap: unset;

column-gap プロパティは以下に挙げた値の一つで指定します。

normal
段間 (列間) にはブラウザー既定の幅が使われます。段組みレイアウトでは 1em と指定され、他の種類のレイアウトでは 0 になります。
<length>
段間 (列間) の寸法を <length> として定義します。負の数であってはいけません。
<percentage>
段間 (列間) の寸法を <percentage> として定義します。負の数であってはいけません。

形式文法

normal | <length-percentage>

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

段組みレイアウト

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;
}

結果

グリッドレイアウト

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;
  column-gap: 20px;
}

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

結果

仕様書

仕様書 状態 備考
CSS Box Alignment Module Level 3
column-gap の定義
草案 グリッド及びフレックスボックスに適用
CSS Grid Layout
column-gap の定義
勧告候補 グリッドレイアウトにどう適用されるかを指定
CSS Multi-column Layout Module
column-gap の定義
草案 初回定義。

初期値normal
適用対象multi-column elements, flex containers, grid containers
継承不可
パーセンテージrefer to corresponding dimension of the content area
メディアvisual
計算値as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
アニメーションの種類length または percentage, calc();
正規順序per grammar

ブラウザーの対応

フレックスボックスレイアウトの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応661661 なし ? なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応66661661 ? なし ?

グリッドレイアウトの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

66

571

291 2

16

161

61

521

401 3

なし

53

441

281 4

10.11
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

66

571

291 5

66

571

291 2

16

161

61

521

401 3

53

441

10.316.01

1. Supported as grid-gap.

2. From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

3. From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. From version 28: this feature is behind the Enable experimental Web Platform features preference.

5. From version 29: this feature is behind the Enable experimental Web Platform features preference.

段組みレイアウトの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

50

あり -webkit-

12

12 -webkit-

52

1.5 -moz- 1

10

37

15 -webkit-

11.1 — 15

10

3 -webkit-

<percentage> values661661 なし ? なし
calc() values661661 なし ? なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

50

あり -webkit-

50

あり -webkit-

12

12 -webkit-

52

4 -moz-

37

15 -webkit-

11.1 — 15

10

3 -webkit-

5.0

あり -webkit-

<percentage> values66661661 ? なし なし
calc() values66661661 ? なし ?

1. Before Firefox 3, the default value for the normal keyword was 0 and not 1em.

関連項目