row-gap (grid-row-gap)
row-gap
は CSS のプロパティで、要素のグリッド行の間のすき間 (溝) の寸法を定義します。
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.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
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>ここで
<length-percentage> = <length> | <percentage>
例
フレックスレイアウト
Experimental
これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
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 または パーセント値, calc(); |
ブラウザーの互換性
フレックスレイアウトでの対応
BCD tables only load in the browser
グリッドレイアウトでの対応
BCD tables only load in the browser
関連情報
- 関連する CSS プロパティ:
column-gap
,gap
- グリッドレイアウトガイド: グリッドレイアウトの基本概念 - 溝