CSS Grid を使うと、カードレイアウトを「少ないコード」でキレイに整えながら、スマホ・PCそれぞれに最適化したレスポンシブ対応が簡単にできます。
しかし、実際にどう書けばいいのか分からない…という初心者の方も多いはず。
この記事では、実際のカードレイアウトを例にしながら、Gridの考え方・使い方をコード付きでやさしく解説します。
これからレイアウトに挑戦したい方は、ぜひ参考にしてみてください。
今回作るレイアウトはこちら
SP版
PC版
CSS gridを使って、レスポンシブに対応しつつレイアウトを作成していきましょう！
Figmaのデータはこちら
＼HTML・CSSの基本を学ぶならこちら／
全体の構造を考える
最初にパーツを考えます。
赤で囲んだところが子要素となるパーツとなります。
どこに配置するとか、どこのグループとかはあまり考えずに子要素を抜き出します。
6つの子要素があることがわかります。
次にどのように分けられるか、マス目状になるように考えていきます。
今回の場合は
SPでは1×6
PCでは3×3
に分けるようにします。こちらの調整はCSSで行います。
HTMLを組む
全体をカード、中の要素を子要素として組みました。CSSはBEMを使用しています。
<div class="card">
<h2 class="card__title">タイトル</h2>
<div class="card__image">
<img src="" alt="" />
</div>
<h3 class="card__sub-title card__sub-title--hobby">趣味</h3>
<p class="card__description card__description--hobby">
休日はお気に入りの漫画を読んで 静かなカフェでコーヒーを楽しみ
気ままに写真を撮り歩いてます
</p>
<h3 class="card__sub-title card__sub-title--skill">特技</h3>
<p class="card__description card__description--skill">
相手の話を丁寧に聞き取り 状況に合わせて素早く判断し
落ち着いて行動できるところ
</p>
</div>imgタグはインラインブロックのため、扱いづらいのでdivで囲います。
構造的には、cardで各要素を囲んでるだけのシンプルHTMLですね。
構造はSPを意識した順番で組んでおり、レイアウトはCSSで調整します。
CSS gridを作る
display:gridを使ってレイアウトを整えます。
世の中スマホファーストなので、まずはSPのデザインから作成していきます。
SPのデザインに合わせてHTMLを作ったので、ブロック要素が上から積み上がるように組むだけで出来上がります。
SPのデザインだと、列を複数作る必要がないのでgrid-template-columnsを指定せずに作成します。
この解説では、gridのみに注力するためほかのスタイルは省略しています。
SP版のCSS
.card{
display: grid;
gap: 10px;
}親要素であるcardにgridを指定して、要素間の隙間を作るためにgapを指定します。
細かい調整は各子要素にmarginをつけて行います。
SP版はこれでおしまいです。シンプルですね。
PC版のCSS
PC版のデザインを考えていきます。
最初に親要素にdisplay:gridを指定。同じクラス名の中で縦横3分割するようにします。
画像が左側、テキストコンテンツが右側にあるので、グリッド状の中で指定する必要があります。
最後に、子要素それぞれに配置を指定します。
/* 親要素の分割指定 */
.card {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, auto);
gap: 8px;
}
/* 子要素の場所指定 */
.card__title {
grid-column: span 2 / span 2;
grid-column-start: 2;
grid-row-start: 1;
}
.card__image {
grid-row: span 3 / span 3;
grid-column-start: 1;
grid-row-start: 1;
}
.card__sub-title--hobby {
grid-column-start: 2;
grid-row-start: 2;
}
.card__description--hobby {
grid-column-start: 2;
grid-row-start: 3;
}
.card__sub-title--skill {
grid-column-start: 3;
grid-row-start: 2;
}
.card__description--skill {
grid-column-start: 3;
grid-row-start: 3;
}いきなり書く量増え過ぎじゃない？
これを書くのはかなり難しいと思うので、ジェネレーターを使います。
ジェネレーターを3×3にして、画像のように割り振るとCSSを作ってくれるので、あとはクラス名を合わせて作れば出来ます。
横方向の割当(columns)
grid-template-columns: repeat(3, 1fr);横方向の割当に関して、1frを３つ、全体を均等に3等分しています。
画像の幅が決まっている場合、例えば200pxとなっていたら
grid-template-columns:200px 1fr 1fr;と言ったような書き方をします。
縦方向の割当(rows)
grid-template-rows: repeat(3, auto);縦の割当はautoにしています。
コンテンツに合わせて高さを調節してくれるのでpadding-bottomなどをつけて調整もしやすいです。
あとはCSSでレスポンシブに合わせて調整したら、SPとPCで変化するカードレイアウトの完成です！
まとめ：グリッドでカードレイアウトを作成
グリッドを使ってカードレイアウトする方法・考え方をまとめました。
グリッドの使い方、要素の分解の仕方がわかればあまり難しくないものです。
うまく使えるとHTMLの構造がシンプルになるためおすすめです。
グリッドを使ったカードレイアウト
- HTMLは親要素と子要素で簡潔にできる
- 分割方法を考えてCSSで配置調整をする
- 各子要素は配置のためにクラス名を変えておく
各要素に場所を指定する必要があるため、クラス名が伸びがちなのが欠点かもしれません。
私の場合ですが、BEMのモディファイア(--を使う)でクラス名を調整します。
HTMLの構造はこの限りではなく、テキスト分をまとめたり、様々な方法がありますが、一例としてみていただけると嬉しいです。
また、カードが複数になった場合にカードサイズがバラバラにならない、subgridもあります。
最後までご覧いただきありがとうございました！