WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： かじかじ
カテゴリー： マークアップ >CSS

下記のようなカード型レイアウトを作りたいとき、各カードでテキストの量が違っているときなどに各画像、各テキストの水平位置を揃えたいという場合はありませんか？
FlexboxやJavascriptでも揃えられますが、今回はGrid Layoutを使った方法をご紹介します！

カード型レイアウトを作る

・HTML

			
<div class="container">
	<div class="card">
		<p class="ttl">タイトルタイトルタイトルタイトル</p>
		<figure><img src="img/img01.jpg" alt=""></figure>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>
	<div class="card">
		<p class="ttl">タイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
		<figure><img src="img/img01.jpg" alt=""></figure>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>
	<div class="card">
		<p class="ttl">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
		<figure><img src="img/img01.jpg" alt=""></figure>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>
	<div class="card">
		<p class="ttl">タイトルタイトルタイトル</p>
		<figure><img src="img/img01.jpg" alt=""></figure>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>
</div>

・CSS

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
}
.card{
	border: 1px solid #ccc;
	padding: 10px;
}
.ttl{
	font-size: 2.0rem;
	font-weight: 700;
}

grid-template-columns: 1fr 1fr 1fr 1fr; のifrは横並びにしたい要素の数だけ設定します。
カードの数が3つの場合、grid-template-columns: 1fr 1fr 1fr;となります。
上記の記述だけでは、タイトルや画像の位置が揃っていないレイアウトになります。

subgridで高さを揃える

横並びの要素に、subgridを追加します。

.card{
	display: grid;
	grid-template-rows: subgrid; /* 追加 */
	grid-row: span 3; /* 追加 */
	border: 1px solid #ccc;
	padding: 10px;
}

grid-row: span 3;で、自身の行について3行分のサイズを使うようにしています。subgridが指定されていることにより、親要素の3行分の高さにります。
たった2行の追加で、赤線の位置が揃いました！

まとめ

このように、subgridプロパティを使えば簡単に子要素・孫要素の高さを揃えることができます。
全ブラウザでサポートされていますので、カード型レイアウトを作成する際はぜひ使ってみてください！