CSSグリッドレイアウト完全入門！初心者でもわかるgapプロパティで行と列の間隔を設定する方法

1. CSSグリッドレイアウトとgapプロパティの基本

1. CSSグリッドレイアウトとgapプロパティの基本

CSSグリッドレイアウトとは、Webページの中身を表のような「行」と「列」で整理して配置できるCSSのレイアウト方法です。 プログラミング未経験の方は、ノートに線を引いてマス目を作り、その中に文字や絵を書くイメージを思い浮かべてください。 このマス目の横方向が「列」、縦方向が「行」です。

gapプロパティは、そのマス目とマス目の「すき間」を調整するためのCSSです。 たとえば、写真アルバムで写真同士がぴったりくっついているより、少し間が空いていた方が見やすいですよね。 gapは、まさにその「見やすくするための余白」を一気に設定できる便利なプロパティです。

CSSグリッド、gap、行、列、間隔、レイアウトといったキーワードは、 Web制作やHTML・CSS学習の初期段階でとてもよく検索されます。 初心者の方でも理解できるよう、ここでは難しい数式や専門用語は使わずに説明していきます。

2. gapプロパティで間隔をまとめて設定する考え方

2. gapプロパティで間隔をまとめて設定する考え方

gapプロパティの最大の特徴は、「行と列の間隔をまとめて指定できる」点です。 以前は、行の間、列の間をそれぞれ別々に設定する必要がありましたが、 gapを使えば一行で設定が完了します。

例えば、学校の机を並べる場面を想像してください。 縦の通路も横の通路も、同じ広さで空けたい場合、 先生が「全部同じ間隔で並べてください」と指示した方が楽ですよね。 gapは、その「全部同じ間隔で」という指示をCSSで表現したものです。

数字の単位としてよく使われるのがpxです。 pxは「ピクセル」と読み、画面の小さな点の集まりだと考えると分かりやすいです。 gap: 20px; と書くと、行と列の間が20ピクセルずつ空きます。

3. 実際にgapを使ったCSSグリッドのサンプル

3. 実際にgapを使ったCSSグリッドのサンプル

ここでは、CSSグリッドレイアウトとgapプロパティを使った、とてもシンプルな例を見てみましょう。 四角い箱を並べて、その間にすき間を作る例です。 コードはそのままコピーしても使える形になっています。

<style>
	.grid-box {
	    display: grid;
	    grid-template-columns: 1fr 1fr 1fr;
	    gap: 20px;
	}

	.grid-item {
	    background-color: #0d6efd;
	    color: white;
	    padding: 20px;
	    text-align: center;
	}
</style>

<div class="grid-box">
	<div class="grid-item">1</div>
	<div class="grid-item">2</div>
	<div class="grid-item">3</div>
	<div class="grid-item">4</div>
	<div class="grid-item">5</div>
	<div class="grid-item">6</div>
</div>

この例では、grid-template-columnsで横に三つの列を作り、 gapで箱と箱の間隔をまとめて指定しています。 gapがあるおかげで、要素同士が重ならず、見た目もすっきりします。

4. 行と列で間隔を変えたいときの考え方

4. 行と列で間隔を変えたいときの考え方

gapは、行と列を同じ間隔にするだけでなく、 縦と横で違う間隔を指定することもできます。 これは「縦のすき間は広め、横は少なめ」といったレイアウトを作りたいときに便利です。

使い方はとてもシンプルで、数字を二つ並べて書きます。 最初の数字が行の間隔、次が列の間隔です。 料理で例えると、縦の盛り付け間隔と横の盛り付け間隔を別々に決めるような感覚です。

CSSグリッドレイアウト、gapプロパティ、行間、列間、余白調整といった言葉は、 初心者がつまずきやすいポイントですが、 「マス目のすき間を決める」と覚えておくと理解しやすくなります。