ブログ投稿日時：
ブログ更新日時：
行や列の間の隙間を指定するgapについて解説
1.
gap とは
gap とは、行や列の間の隙間を指定するプロパティです。
gap の指定方法は3種類あります。
行と列の隙間をまとめて指定したいなら gap
行間の隙間だけを指定したいなら row-gap
列間の隙間だけを指定したいなら column-gap
作成するレイアウトに合わせて使い分けていきましょう。
2.
gap の指定方法
それでは、gap の指定方法と表示を見ていきましょう。
<div class="article-gap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>.article-gap {
display: flex;
flex-wrap: wrap;
gap: 30px 10px;
}
.item {
width: calc((100% - 10px * 2) / 3);
height: 100px;
background-color: red;
}HTMLの表示
上記のように gap を使用すると行と列の隙間をまとめて指定することができました。
gapでまとめて指定したときは
gap: 行間のすき間 列間のすき間;
で隙間が決まるので、行間と列間が反対にならないように注意しましょう。
3.
row-gap と column-gap の指定方法
それでは、row-gap と column-gap の指定方法と表示を見ていきましょう。
<div class="article-gap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>.article-gap {
display: flex;
flex-wrap: wrap;
row-gap: 10px;
column-gap: 30px;
}
.item {
width: calc((100% - 30px * 2) / 3);
height: 100px;
background-color: red;
}HTMLの表示
上記のように row-gap を使用すると行間の隙間だけを指定することができ、
column-gap を使用すると列間の隙間だけを指定することができます。
今回は row-gap を10pxで指定しているので行間は少し狭い隙間ができています。
それに対して、column-gap は30pxで指定しているので列間は程よい隙間ができています。
4.
今回のまとめ
この記事では gap について解説しました。
gap とは、行や列の間の隙間を指定するプロパティです。
gap の指定方法は3種類あります。
行と列の隙間をまとめて指定する gap
行間の隙間だけを指定する row-gap
列間の隙間だけを指定する column-gap
特に gap を使用するときは行と列が逆にならないように注意しましょう。
最後までお読みいただきありがとうございました。