「見出し -> 画像 -> 本文」のようなカード型UIレイアウト例をgridでレイアウトしていきます。
左側がスマホやタブレット端末など、右側がPCでの閲覧を想定したレスポンシブデザインです。
実装例は以下 CodePen に提示します。
※お手数ですが、下部の0.5xや0.25xで画面サイズを調整してみてください
See the Pen simple-grid-util by benjuwan (@benjuwan) on CodePen.
はじめに
冒頭に貼ったキャプチャ画像のようなスタイルを実現するにはgridが一番シンプルで楽だと思います。
※flexやその他のアプローチもあるでしょうが、シンプルかつコードの保守性、可読性などを考慮すると、やはりgridが良いでしょう。
実現方法は先の CodePen を見ると分かるのですが、せっかくなので少し細かく解説していきたいと思います。
grid レイアウトとは
端的に言えば、グリッドという基準線を用意し、それに基づいて要素をレイアウトしていくデザイン手法です。
筆者はエディトリアルやグラフィックデザイン出身なのでグリッドには元々親しみがありましたが、web制作におけるグリッドの余白間隔は紙媒体のルールよりも、個人的には8の倍数ルールが適用されていることが多いように感じます。
グリッドレイアウトは結構歴史が古く、奥深いので興味のある方は調べてみるとデザインの変遷も知れて良いかもしれません。
少し話が逸れましたが、webでこのグリッドレイアウトを実現する方法は親要素にdisplay: gridをはじめ、grid-template-columns（列）や必要に応じてgrid-template-rows（行）を指定し、子要素をエリア別にレイアウトしていくアプローチになります。
先の CodePen での実装例で表すとと以下になります。
- html
<section class="simple-grid-util">
<h2>Articles</h2>
<article>
<h3>the title</h3>
<figure>
<img src="https://picsum.photos/200/300" alt="https://picsum.photos/">
</figure>
<div class="info">
<p>the content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
</div>
</article>
<!-- 中略 -->
...
..
.
</section>
- css
/* 中略 */
@media screen and (min-width: 1025px){
.simple-grid-util {
& article {
display: grid;
grid-template-columns: repeat(2, 1fr);
& h3 {
/* grid-row-start（-line） / grid-column-start（-line） / grid-row-end（-line） / grid-column-end（-line） */
grid-area: 1 / 1 / 2 / 2;
}
& figure {
grid-area: 1 / 2 / 4 / 3;
}
& .info {
grid-area: 2 / 1 / 3 / 2;
}
&:nth-of-type(even){
& h3 {
grid-area: 1 / 2 / 2 / 3;
}
& figure {
grid-area: 1 / 1 / 4 / 2;
}
& .info {
grid-area: 2 / 2 / 3 / 3;
}
}
}
}
}
今回は、grid-areaプロパティの値に数値を直接記述していくアプローチです。
※名前付きエリア（grid-area: header）については特に言及しませんのでご了承ください。
先ず、親要素にグリッドレイアウトを適用します。
article {
/* グリッドレイアウトを適用 */
display: grid;
/* 子要素を、等間隔で2カラムレイアウトに収める */
grid-template-columns: repeat(2, 1fr);
}
次に、子要素のレイアウト位置を指定していきます。
ここが今回の肝です。
& h3 {
/* grid-row-start（-line） / grid-column-start（-line） / grid-row-end（-line） / grid-column-end（-line） */
grid-area: 1 / 1 / 2 / 2;
}
コメントとして記載していますがgrid-areaプロパティの値は、左から「行の開始ライン / 列の開始ライン / 行の終了ライン / 列の終了ライン」となります。
重要なポイントとして、ラインとは行および列における「グリッド線」であるというところです。
言葉で説明するよりも図解の方が分かりやすいと思いますので、Claudeにサクッと作ってもらいました。
これでグリッド線と子要素の配置関係について理解できると思います。
さいごに
途中で少し触れましたが、grid-areaには名前付きエリアという指定方法もあります。
本記事では触れませんでしたが、名前付きエリアを使った方が（人によっては）直感的に指定できて分かりやすいかもしれません。
関心のある方は以下が参考になるかと思います。
ここまで読んでいただき、ありがとうございました。
本記事が、カード型UIレイアウト例をシンプルに実装したい方の参考に少しでもなれると幸いです。
参照記事