CSSのgapプロパティでグリッド間に適切な余白を作る

CSSのgapプロパティは、要素間に適切な余白を作るプロパティです。

Gridシステム・Flexbox・columnsレイアウトのいずれでも利用できる様になりました。

marginやpaddingと違い、要素間には余白を作りますが外枠との間には作りません。

CSSのgapプロパティ

今回はCSSのgapプロパティについてです。このプロパティは以前からある機能です。

昨年、Gridシステムに加えてFlexboxでもgapが機能するようになりました。

並べられた各要素間に、最適な「余白」を作るプロパティです。

本記事ではgapおよびその関連プロパティが、どのように機能するかを解説します。

gapプロパティ6種

CSSのgapプロパティには全部で6種あります。

この中で今主流で使われているのは上3つのgapとrow-gapとcolumn-gapです。

上の3つは下3つを兼ねるので、上3つの使い方を熟知していれば問題はありません。

gapとmarign、paddingの違い

gapを使わず、以前までのmarginやpaddingを使っても余白は実現できます。

しかし両者には大きな違いがあります。

gapは常にコンテナ全体が軸

marginやpaddingは各要素単体に対して反映されるのに対し、gapはコンテナを軸に反映される事です。

marginやpaddingは全ての要素に対して反映されるので、一番初め、或いは最後の要素にも同じように適用されます。

その場合、以下の様に右端と左端にも余白ができてしまう事になります。

marginやpaddingで30pxの余白を作った場合

CSSでmarign・paddingを消す

最初と最後の要素のmarginやpaddingを「0」にするには別途CSS設定が必要になり、その分コードが複雑になる訳です。

ここは皆さんご経験があるのではないでしょうか。

gapはコンテナ枠との間には生まれない

しかしgapを使えばその必要がありません。

あくまで要素と要素の間に余白を作るため、コンテナ枠との間には余白は生まれません。

gapを30px入れた場合

最初からこの状態になりますので、大変便利ですよね。

要素の幅を侵食しない個別の余白ができる

その代わりgapで入れた余白は、marginやpaddingとは別個の余白となります。

CSSの設定によってはmarginやpaddingも込みで要素サイズとなる場合があります。

つまり要素サイズがmarginやpaddingに侵食されるケースですね。

それに対しgapの余白は、要素サイズとは別に完全に外側に作られます。

ですのでその分表示枠自体が横や縦に広がる事になります。

Gridレイアウトへのgap設置

3列2行のGridシステムのソース

それでは3列2行のGridシステムを例に取って余白のでき方を見ていきましょう。

html

<div class="g_wrap"> <div>Grid</div> <div>Grid</div> <div>Grid</div> <div>Grid</div> <div>Grid</div> <div>Grid</div> </div>

CSS

.g_wrap { display: grid; grid-template-columns: 200px 200px 200px; grid-auto-rows: 100px; } .g_wrap div{ background: #f9e5c7; }

幅200px×高さ100pxの要素が並びます。

これにより以下の様なグリッドレイアウトができます。

※スマホ版は幅を80pxに変えてあります。

レイアウトサンプル

各要素には背景色を付けていますが、境目がありませんね。

要素内に入った「Grid」の文字があり、3列2行になっている事が分かると思います。

gapの適用

それではgapを20px入れていきます。gapは列方向行方向のいずれも余白を作ります。

CSS

.g_wrap div{ gap: 20px; background: #f9e5c7; }

レイアウトサンプル

各要素間の線のような部分が20px太くなった様な感じで、各要素の幅は200pxで変わりません。

余白ができた分、レイアウト全体の高さや幅が前サンプルより広がっています。

row-gapの適用

row-gapは常に行（下方向）に対して適用されます。

row-gapを適用すると以下の様になります。

レイアウトサンプル

column-gapの適用

column-gapは常に列（左右方向）に対して適用されます。

column-gapを適用すると以下の様になります。

レイアウトサンプル

グリッドシステムは基本テーブルレイアウトと同じです。

列が横方向で行が縦方向だとすぐにわかるため、比較的簡単にrow-gapやcolumn-gapが適用できると思います。

Flexboxレイアウトへのgap設置

では次はFlexboxへgapを設置してみましょう。

Flexboxによる6列レイアウト

html

<div class="f_wrap"> <div>flex</div> <div>flex</div> <div>flex</div> <div>flex</div> <div>flex</div> <div>flex</div> </div>

CSS

.f_wrap{ display: flex; flex-wrap: wrap; } .f_wrap div{ padding: 30px; background: #f1f1fd; }

これにより以下の様なFlexboxができます。

レイアウトサンプル

先ほどのGrid同様に各要素には背景色を付けています。

Gridシステム同様、境目なく一列に並んでいます。

gapの適用

ではFlexboxの各要素にgap20pを適用してみます。

CSS

.f_wrap{ display: flex; flex-wrap: wrap; gap: 20px; }

レイアウトサンプル

PCでは1行しかないため、gapを適用しても行方向のrow-gapの効果は無効になり、列方向のcolumn-gapの効果のみが適用されています。

スマホでは複数行になり、列方向以外に行方向のrow-gap効果も有効になっています。

垂直方向へのスタック

次にflex-directionに切り替えてみます。

これによりflexアイテムは全て上から下に垂直に並びます。

CSS

.f_wrap{ display: flex; flex-direction: column; }

レイアウトサンプル

上記の様に要素が全て縦に並びます。

この時column-gapの効果は削除され、上下の余白としてrow-gapが適用されていますね。

行の折り返しが含まれる例

では要素の幅の問題で1列に収まらず、段落ちして2行になる場合を考えてみましょう。

CSS

.f_wrap{ display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 10px; justify-content: center; }

レイアウトサンプル

上記の場合、PC・スマホ共に列方向にはclumnの40px、行方向にはrowの10pxのgapが適用されます。

スマホでは全て1行ずつになっているのでわかりにくいと思います。

この様に複数行になる可能性がある場合は、columnとrowを別々に設定しておく方が良いですね。

Flexboxにおけるcolum-gapの数

FlexboxはGridシステムとは大きく違う部分があります。

列方向のgapは、各行全て同じ本数や位置になるとは限らないという事です。

上記の様にjustify-content: centerで要素内に中央揃えしたものをPCで確認すると、1行目と2行目のgapの位置や本数が違いますよね。

スマホでは全て1行ずつになっているのでわかりにくいと思います。

このようにFlexbox上のgapは、他とは独立して適用されるレイアウトになります。

columnsレイアウトへのgap設置

最後にcolumnsプロパティの紹介です。

これもGridシステムやflexbox同様、段組みされた要素の段の幅や段数を設定して横並びを実現するプロパティです。

これに対してもgapは使えます。

columnsによる3列レイアウト

html

<div class="c_wrap"> <div>column</div> <div>column</div> <div>column</div> <div>column</div> <div>column</div> <div>column</div> </div>

CSS

.c_wrap { column-count: 3; }

レイアウトサンプル

このように列の数を設定するだけで、簡単にコンテンツを横並びさせる事ができます。

各列の横幅サイズを設定する事もできます。

gap指定に関する違い

columnsレイアウトでのgapはGridシステムやFlexboxと比べて3つの違いがあります。

高さの概念がない

columnsレイアウトではrow-gapの概念がありません。

結果的に1行2行と段落ちする事はあっても、分離独立はしていないためです。

そのため適用できるのはcolumn-gapのみとなります。

最初から列の間に余白がある

column-gapを設定していなくても、最初から各要素間に余白があります。

この余白はもちろんcolumn-gapを設定する事で上書きできます。

gap自体のスタイリングが可能

columnsレイアウトでは、gap設定自体にスタイルを設定する事ができます。

下は要素自体にスタイリングした例です。

CSS

.c_wrap{ column-count: 3; column-gap: 12px; column-rule: 4px solid red; padding: 5px; }

レイアウトサンプル

上記の様にpaddingの余白を入れたり、borderを入れたりする事もできます。

columnレイアウトでは高さのgapは作れない

ここでpadding-topやgap（row-gap）など、高さを与える数値を入れてもcolumnsの要素に高さの余白ができる事はありません。

columnsレイアウトは大量の文章が流し込まれる事が前提で、あくまで横並びを念頭に置いています。

高さは流し込まれたコンテンツ量によって生まれてくるため、高さの概念自体は無い事に注意しましょう。

一押し人気コーナー紹介