カード型レイアウトと相性抜群!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;」を使ったレイアウト手法を覚えておくと、
きっと活躍してくれることかと思います。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。