CSS - row-gap

概要

属性名 row-gap
値 <length> | <percentage> | normal
初期値normal
適用可能要素フレックスコンテナー、グリッドコンテナー
継承継承しない
メディアvisual

サポート (説明)

説明

フレックス、グリッド間の行方向の隙間の幅を指定します。

値説明
<length>隙間の幅を長さで指定します。
<percentage>隙間の幅をパーセントで指定します。
normalブラウザによる標準の隙間を開けます。

使用例(フレックス)

CSS
.flex {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
}
.flex > * {
  flex: 1;
  flex-basis: 30%;
  background-color: #ddd;
  border: 1px solid #ccc;
  padding: .5rem;
}
HTML
<div class="flex">
 <div>Flex#1</div>
 <div>Flex#2</div>
 <div>Flex#3</div>
 <div>Flex#4</div>
 <div>Flex#5</div>
 <div>Flex#6</div>
</div>
表示
Flex#1
Flex#2
Flex#3
Flex#4
Flex#5
Flex#6

使用例(グリッド)

CSS
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 1rem;
}
.grid > * {
  background-color: #ddd;
  border: 1px solid #ccc;
  padding: .5rem;
}
HTML
<div class="grid">
  <div>Grid#1</div>
  <div>Grid#2</div>
  <div>Grid#3</div>
  <div>Grid#4</div>
  <div>Grid#5</div>
  <div>Grid#6</div>
</div>
表示
Grid#1
Grid#2
Grid#3
Grid#4
Grid#5
Grid#6

関連項目

gap, column-gap, columns, flex, grid

リンク

Copyright (C) 2022 杜甫々
初版：2022年7月24日、最終更新：2022年7月24日
https://www.tohoho-web.com/css/prop/row-gap.htm