CSSrow-gap プロパティは、要素の間のすき間 () を定義します。

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

構文

/* <length> 値 */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/* <percentage> 値 */
row-gap: 10%;

/* Global values */
row-gap: inherit;
row-gap: initial;
row-gap: unset;

<length-percentage>
行を隔てる溝の幅です。 <percentage> 値は要素の寸法に対する相対値です。

形式文法

normal | <length-percentage>

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

フレックスレイアウト

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

HTML

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

CSS

#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  row-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}

結果

グリッドレイアウト

HTML

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

CSS

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

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

結果

仕様書

仕様書 状態 備考
CSS Box Alignment Module Level 3
row-gap の定義
草案 初回定義

初期値normal
適用対象段組み要素, フレックスコンテナー, グリッドコンテナー
継承なし
パーセンテージ該当するコンテンツ領域の寸法を参照
メディア視覚
計算値指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる
アニメーションの種類length または percentage, calc();
正規順序構文通り

ブラウザーの対応

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome ? Edge ? Firefox 完全対応 63IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 完全対応 63Opera Android ? Safari iOS 未対応 なしSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 66
完全対応 66
完全対応 57
代替名
代替名 非標準の名前 grid-row-gap を使用しています。
完全対応 29
代替名 無効
代替名 非標準の名前 grid-row-gap を使用しています。
無効 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
代替名
代替名 非標準の名前 grid-row-gap を使用しています。
Firefox 完全対応 61
完全対応 61
完全対応 52
代替名
代替名 非標準の名前 grid-row-gap を使用しています。
完全対応 40
代替名 無効
代替名 非標準の名前 grid-row-gap を使用しています。
無効 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.
IE 未対応 なしOpera 完全対応 53
完全対応 53
完全対応 44
代替名
代替名 非標準の名前 grid-row-gap を使用しています。
完全対応 28
代替名 無効
代替名 非標準の名前 grid-row-gap を使用しています。
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1
代替名
完全対応 10.1
代替名
代替名 非標準の名前 grid-row-gap を使用しています。
WebView Android 完全対応 66
完全対応 66
完全対応 57
代替名
代替名 非標準の名前 grid-row-gap を使用しています。
Chrome Android 完全対応 66
完全対応 66
完全対応 57
代替名
代替名 非標準の名前 grid-row-gap を使用しています。
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile 未対応 なしFirefox Android 完全対応 61
完全対応 61
完全対応 52
代替名
代替名 非標準の名前 grid-row-gap を使用しています。
完全対応 40
代替名 無効
代替名 非標準の名前 grid-row-gap を使用しています。
無効 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.
Opera Android 完全対応 53
完全対応 53
完全対応 44
代替名
代替名 非標準の名前 grid-row-gap を使用しています。
Safari iOS 完全対応 10.3
代替名
完全対応 10.3
代替名
代替名 非標準の名前 grid-row-gap を使用しています。
Samsung Internet Android 完全対応 6.0
代替名
完全対応 6.0
代替名
代替名 非標準の名前 grid-row-gap を使用しています。

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,