row-gap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨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: rgba(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,∞]> 

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

例

フレックスレイアウト

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

結果

仕様書

Specification
CSS Box Alignment Module Level 3 # column-row-gap

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨1970年1月1日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content