row-gap

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2017年10月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

row-gap は CSS のプロパティで、要素のグリッド行の間のすき間(溝)の寸法を定義します。

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

試してみましょう

row-gap: 0;

row-gap: 1ch;

row-gap: 1em;

row-gap: 20px;

<section class="default-example" id="default-example">
 <div class="example-container">
 <div class="transition-all" id="example-element">
 <div>One</div>
 <div>Two</div>
 <div>Three</div>
 <div>Four</div>
 <div>Five</div>
 </div>
 </div>
</section>

#example-element {
 border: 1px solid #c5c5c5;
 display: grid;
 grid-template-columns: 1fr 1fr;
 width: 200px;
}
#example-element > div {
 background-color: rgb(0 0 255 / 0.2);
 border: 3px solid blue;
}

構文

css

/* <length> 値 */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;
/* <percentage> 値 */
row-gap: 10%;
/* グローバル値 */
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: revert-layer;
row-gap: unset;

値

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

公式定義

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

形式文法

row-gap = 
 normal | 
 <length-percentage [0,∞]> | 
 <line-width> 

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

<line-width> = 
 <length [0,∞]> | 
 hairline | 
 thin | 
 medium | 
 thick

例

フレックスレイアウト

HTML

html

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

CSS

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

html

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

CSS

css

#grid {
 display: grid;
 height: 200px;
 grid-template-columns: 150px 1fr;
 grid-template-rows: repeat(3, 1fr);
 row-gap: 20px;
}
#grid > div {
 border: 1px solid green;
 background-color: lime;
}

結果

[フレーム]

仕様書

仕様書
CSS Box Alignment Module Level 3 # column-row-gap

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2025年12月27日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告