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 October 2017.

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

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

試してみましょう

構文

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
row-gap
Supported in Flex Layout
Supported in Grid Layout

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

関連情報