display:gridで要素を格子状に配置する方法

前回の記事「space-betweenで要素が足りないときに左詰めにしたい」では「display:flex;」を利用して要素を横並び配置にする方法をご紹介しましたが、同じように要素を均等に縦横に配置するのに便利な「display:grid;」を使ったやり方も見ていきたいと思います。

この「display:grid;」は「グリッドレイアウト（格子状配置）」を再現したいときに便利なプロパティになります。

表などのテーブルとセルをイメージしてもらえればわかりやすいと思いますが、縦の行と横の列の並びで構成されるものがグリッドレイアウトとなります。

例えばサイトやブログの記事などで、サムネイル画像と記事タイトルを複数表示する場合などで見るレイアウトです。下画像は９件の記事を並べた時をイメージしていますが、前回のdisplay:flex;や以前よりよく使われてきたfloat:left;などでも再現が可能ですが、今回はグリッドを利用した手法になります。

まずは、基本となるHTMLコードを確認していきましょう。

基本となるコード

ベースとなるHTMLは以下の通りで、各記事のサムネイルとタイトルを<div class=”conts_list“>で子要素として６件繰り返しており、親要素として<div class=”conts_box“>で囲っています。

<div class="conts_box">
	<div class="conts_list">
		<p><img src="images/img_01.jpg"></p>
		<p>グリッドアイテム1</p>
	</div>
	<div class="conts_list">
		<p><img src="images/img_02.jpg"></p>
		<p>グリッドアイテム2</p>
	</div>
	<div class="conts_list">
		<p><img src="images/img_03.jpg"></p>
		<p>グリッドアイテム3</p>
	</div>
	<div class="conts_list">
		<p><img src="images/img_04.jpg"></p>
		<p>グリッドアイテム4</p>
	</div>
	<div class="conts_list">
		<p><img src="images/img_05.jpg"></p>
		<p>グリッドアイテム5</p>
	</div>
	<div class="conts_list">
		<p><img src="images/img_06.jpg"></p>
		<p>グリッドアイテム6</p>
	</div>
</div>

子要素の「.conts_listを“グリッドアイテム”」と呼び、親要素の「.conts_boxを“グリッドコンテナ”」と呼びます。

.conts_box{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	gap: 1%;
}
.conts_list{
	text-align: center;
}

まず、親要素の.conts_boxに「display:grid;」を指定します。

そして行数と列数の指定は同じく親要素に対して、「grid-template-columns」と「grid-template-rows」プロパティで指定をします。

今回のデモサンプルでは、列を３列、行を２行で配置するため、「grid-template-columns: 1fr 1fr 1fr;」と３つ指定しており、高さは要素の高さに自動で合わせるために「grid-template-rows: auto;」を指定しています。

サンプルでは、gridで指定できる見慣れない「fr」という単位も使用することができます。「fr」という単位は横幅を指定していない子要素をどのような割合で配置するか？という指定になります。上のサンプルで指定してる「grid-template-columns: 1fr 1fr 1fr;」を訳すと「子要素を横に３列で並べ（３つ指定しているため）均等（サイズ１）の割合（１：１：１）で配置する」という意味になります。

また、要素同士の隙間を均等に空けたい場合は同じく親要素の「gapプロパティ」に値を指定します。サンプルでは「gap:1%;」を指定しいています。

実際にどのように表示されるかは下の「デモサンプル１」を確認してみてください。

次に、横の列を２列に変更したい場合は、「grid-template-columns: 1fr 1fr;」と２つ指定に書き換えます。

.conts_box{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	gap: 1%;
}
.conts_list{
	text-align: center;
}

まとめ