column-gap
は CSS のプロパティで、要素の段または列の間の隙間 (溝) の寸法を設定します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
当初は段組みレイアウトの一部でしたが、 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>
として定義します。<length>
のプロパティ値は負の数であってはいけません。 <percentage>
- 段間 (列間) の寸法を
<percentage>
として定義します。<percentage>
のプロパティ値は負の数であってはいけません。
形式文法
normal | <length-percentage>where
<length-percentage> = <length> | <percentage>
例
フレックスレイアウト
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;
}
結果
グリッドレイアウト
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;
}
結果
段組みレイアウト
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 column-gap の定義 |
草案 | グリッド及びフレックスボックスに適用 |
CSS Grid Layout column-gap の定義 |
勧告候補 | グリッドレイアウトにどう適用されるかを指定 |
CSS Multi-column Layout Module column-gap の定義 |
草案 | 初回定義。 |
初期値 | normal |
---|---|
適用対象 | 段組み要素, フレックスコンテナー, グリッドコンテナー |
継承 | なし |
パーセンテージ | 該当するコンテンツ領域の寸法を参照 |
計算値 | 指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる |
アニメーションの種類 | length または percentage, calc(); |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
フレックスレイアウトでの対応
BCD tables only load in the browser
グリッドレイアウトでの対応
BCD tables only load in the browser
段組みレイアウトでの対応
BCD tables only load in the browser
関連情報
- 関連する CSS プロパティ:
row-gap
,gap
- グリッドレイアウトのガイド: グリッドレイアウトの基本概念 - 溝
- 段組みレイアウトのガイド: 段組みのスタイル付け