カード型レイアウトと相性抜群！gapプロパティを使った簡単レイアウト[css]
では、カード型レイアウトともとても相性が良い、
cssの「gapプロパティ」を使ったレイアウト方法についてご紹介しました。
今回の記事では、その「gapプロパティ」と組み合わせて使う上でも便利な
レイアウト手法である、「cssの display: grid プロパティ」によるレイアウトについて書いていきます。
display: grid を指定するだけで、その要素は「グリッドコンテナー」と言う概念になる
それでは、「cssの display: grid プロパティ」によるレイアウトについて見ていきたいと思います。
前回の記事と同様に、次の様なカード型レイアウトをする場合の話です。
↑このようなカード型レイアウトを作成する場合、
従来通り、もちろん display: flex; を使用しても実現が可能ですが、
display: grid; を使用すると、もっと簡単になります。
具体的には、次の様に書きます。
[cssのgridプロパティによるレイアウトの例（css）]
.my-container {
display: grid;
gap: 2rem 2%;
grid-template-columns: 1fr 1fr 1fr;
margin: 0 auto;
width: 1200px;
}
...(中略)...
↑各カードが並ぶ想定の、親ボックスに指定するcssとして読んでください。
2行目でまず、display: grid; を指定。
これにより、この親ボックスが「グリッドコンテナー」と言う概念になります。
同時に、その小要素（この例で言うと個々のカード）は「グリッドアイテム」と言う概念になります。
続く3行目では、
前回の記事でも登場した gap です。これで、各カード間の余白を指定しています。
そして4行目。
grid-template-columns: 1fr 1fr 1fr;
という指定がありますが、これが「グリッドアイテム」をどう並べるのか、と言うことを定義している部分になります。
今回は、冒頭のキャプチャの様に「3列」で並べたいため、この指定をしています。
もしも各カードを「1列」で並べたい場合の指定は
grid-template-columns: 1fr;
となり、
もしも各カードを「2列」で並べたい場合の指定は
grid-template-columns: 1fr 1fr;
と指定します。
もしも各カードを「4列」で並べたい場合の指定は
grid-template-columns: 1fr 1fr 1fr 1fr;
を指定すれば良いです。（次のキャプチャの様になります。）
また、最初のカードを2枚分、その隣に1枚ずつ並べる場合は
grid-template-columns: 2fr 1fr 1fr;
と指定します。すると、次の様なレイアウトが実現できます。
…いかがでしょうか。
display: flex;
を使った場合のレイアウトに比べて、かなり柔軟に
指定ができると言うことが、お分かりいただけたかと思います。
次のセクションで、htmlを含めたコードの全体像を書いておきます。
コード全体像
「cssの display: grid; プロパティ」を使ったカード型レイアウトの、htmlとcss全体は以下のようになります。
[「cssの display: grid プロパティ」を使ったカード型レイアウト（html側）]
<div class="my-container">
<div class="my-item">
<figure class="my-figure">
<img class="my-image" src="https://picsum.photos/560/320?grayscale&random=1" alt="サムネイル" />
</figure>
<div class="my-description">
<p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
</div>
</div>
<div class="my-item">
<figure class="my-figure">
<img class="my-image" src="https://picsum.photos/560/320?grayscale&random=2" alt="サムネイル" />
</figure>
<div class="my-description">
<p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
</div>
</div>
<div class="my-item">
<figure class="my-figure">
<img class="my-image" src="https://picsum.photos/560/320?grayscale&random=3" alt="サムネイル" />
</figure>
<div class="my-description">
<p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
</div>
</div>
<div class="my-item">
<figure class="my-figure">
<img class="my-image" src="https://picsum.photos/560/320?grayscale&random=4" alt="サムネイル" />
</figure>
<div class="my-description">
<p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
</div>
</div>
<div class="my-item">
<figure class="my-figure">
<img class="my-image" src="https://picsum.photos/560/320?grayscale&random=5" alt="サムネイル" />
</figure>
<div class="my-description">
<p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
</div>
</div>
<div class="my-item">
<figure class="my-figure">
<img class="my-image" src="https://picsum.photos/560/320?grayscale&random=6" alt="サムネイル" />
</figure>
<div class="my-description">
<p class="my-text">display: grid; プロパティを使ったカード型レイアウト</p>
</div>
</div>
</div>
[「cssの display: grid プロパティ」を使ったカード型レイアウト（css側）]
.my-container {
display: grid;
gap: 2rem 2%;
grid-template-columns: 2fr 1fr 1fr; /* レイアウトに応じてここを可変 */
margin: 0 auto;
width: 1200px;
}
.my-item {
background: #fff;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
overflow: hidden;
}
.my-figure {
height: 180px;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
.my-image {
display: block;
width: 100%;
}
.my-description {
font-size: .875rem;
height: 80px;
padding: 1rem;
}
.my-text {
margin: 0;
}
「グリッドコンテナー」に指定できる項目はまだまだある
display: grid; を使用すると、柔軟にレイアウトが組めると言うことが、ここまでで理解いただけたことと思います。
この display: grid; ですが、
とても奥が深く、上のセクションでご紹介した手法の他に、
個々のグリッドを繰り返す際に使える
repeat
や、
グリッドのサイズ変化による影響を調整をすることがができる
minmax関数、
さらに理解を深めると、
グリッド線の概念が登場します。
今回の記事ではボリュームが多くなりすぎてしまうため、
それらの説明は割愛しますが、いやはや
この display: grid; というのは
かなり複雑なレイアウトに対応する事ができる
強力なプロパティである、
と言うことは充分ご理解いただけたかと思います。
MDNでの解説ページ
ご存知、Mozillaが運営する、Web技術に関するとても充実したオンラインリファレンスである MDN Docs 内においての、
display: grid; に関する解説ページは次のリンク先になります。
↑こちらの解説ページには、
上のセクションで名前だけ登場した
repeat
minmax関数
グリッド線の概念
等々の、かなり詳細な解説が記載されています。熟読すると、「display: grid;」に関しての理解が深まる事と思います。
この記事のまとめ
今回は、カード型レイアウトともとても相性が良い
cssの「display: grid;」を使ったレイアウト手法についての記事を書きました。
Web制作案件において
商品一覧のページを組む際や、
記事をカード型レイアウトで見せたい時などなど、
この「display: grid;」を使ったレイアウト手法を覚えておくと、
きっと活躍してくれることかと思います。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。