column-gap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

column-gapCSS のプロパティで、要素の段または列の間のすき間()の寸法を設定します。

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

仕様書の初期バージョンでは、このプロパティは grid-column-gap と呼ばれていました。古いウェブサイトとの互換性を維持するため、ブラウザーは grid-column-gapcolumn-gap の別名として受け入れます。

試してみましょう

構文

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

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

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

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

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

normal

列間(段間)にはブラウザー既定の幅が使われます。段組みレイアウトでは 1em と指定され、他の種類のレイアウトでは 0 になります。

<length>

列間(段間)の寸法を <length> として定義します。 <length> のプロパティ値は負の数であってはいけません。

<percentage>

列間(段間)の寸法を <percentage> として定義します。 <percentage> のプロパティ値は負の数であってはいけません。

公式定義

初期値normal
適用対象段組み要素、フレックスコンテナー、グリッドコンテナー
継承なし
パーセント値コンテンツ領域の対応する寸法に対する相対値
計算値指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる
アニメーションの種類length または パーセント値, calc();

形式文法

column-gap = 
normal |
<length-percentage [0,∞]>

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

フレックスレイアウト

この例では、フレックスコンテナーに 2 つの異なる幅(200px300px)の 6 つのフレックスアイテムを設置し、グリッドとしてレイアウトされていないフレックスアイテムを作成しています。 column-gap プロパティは、隣接するフレックスアイテムの間に水平空間を追加するために使用します。

HTML

html
<div class="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

フレックスコンテナーを作成するには、 display プロパティの値を flex に設定します。そして、一括指定の flex-flow プロパティを使って、 flex-direction を row(既定値)に、 flex-wrapwrap に設定し、必要に応じてフレックスアイテムが新しい行に流れるようにします。既定では、フレックスアイテムはコンテナーと同じ高さに引き伸ばされます。 height を設定することで、空のフレックスアイテムでも 100px の高さになります。

column-gap プロパティをより分かりやすく示すために、この例のフレックスアイテムには 2 つの異なる幅の値を設定しています。フレックスアイテムの幅は <div> のフレックスアイテム内で設定します。 flex 一括指定プロパティの flex-basis 成分を使用して、すべてのフレックスアイテムの幅を 200px にしています。次に、 :nth-of-type(3n) セレクターを使用して 3 つ目のフレックスアイテムを対象とし、幅を 300px に広げます。

フレックスコンテナーの column-gap の値に 20px を設定し、各行で隣接するフレックスアイテムの間に 20px のギャップを作成します。

css
.flexbox {
  display: flex;
  flex-flow: row wrap;
  height: 100px;
  column-gap: 20px;
}

.flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 200px;
}
div:nth-of-type(3n) {
  flex: 300px;
}

結果

メモ: それぞれのフレックス行で隣接するフレックスアイテムの間には水平空間がありますが、行の間には空間がありません。フレックス行間の垂直空間を設定するには、 row-gap プロパティに 0 以外の値を指定します。 gap 一括指定プロパティを使用することもでき、 1 つの宣言で row-gapcolumn-gap の両方を、この順に設定することができます。

グリッドレイアウト

HTML

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

CSS

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

結果

段組みレイアウト

HTML

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

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

結果

仕様書

Specification
CSS Box Alignment Module Level 3
# column-row-gap
CSS Grid Layout Module Level 2
# gutters
CSS Multi-column Layout Module Level 1
# column-gap

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
column-gap
Supported in Flex Layout
Supported in Grid Layout
Supported in Multi-column Layout
calc() values
<percentage> values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報