[CSS] display:gridの使い所

今回は、display:gridを手早く使うスニペットを掲載しています。 ホームページを作る時に、画像やカード的な物を並べる一覧リスト的な表示が必要な場合があります。 リスト表示と一言で言っても、色んな種類があり、次のようなパターンをそれぞれの用途で使い分けるようにしています。 リスト型

• リスト-1
• リスト-2
• リスト-3
• リスト-4
• リスト-5

テーブル型

#	Name	Type	Level
1	HTML	Cording	★☆☆
2	CSS	Cording	★☆☆
3	Javascript	Programing	★★☆
4	PHP	Programing	★★★

カード型

カード型の難易度を知る

実際にコーディングしたことがある人はわかると思いますが、カード型と一言で言っても実は様々な難しさがあります。 この形式をよく見かけるのは、ECサイトや、画像一覧を表示するような場合に使いますが、難しさのポイントとしては、 横幅に応じて横並び人表示するカードの個数が変更されるような場合です。 一定の数を、固定値で表示する場合は難しくもないんですが、いわゆるレスポンシブ表示をする場合には、どのように組み立てればいいかという難しさに直面するでしょう。 そのコーディングにも、何パターンもやり方が存在しています。 ちなみに、Tableタグで記述すると、横並びの個数が固定されてしまうので、今回のパターンからは外しています。

パターン1. display:inline-block パターン2. display:flex パターン3. display:grid

以下に、それぞれのパターン別のサンプルを表示してみるので、ブラウザサイズを変更して、お気に入りを見つけてください。

パターン1. display:inline-block

.inline-frame{ text-align:center; } このパターンは、表示する画面幅（親要素の幅）に応じて、エレメントが自動で改行してくれるので、良い感じに表示できるかと思われますが、 デフォルトの状態では、左寄せになってしまい、 text-alignをcenterをセットすると、最下段に改行された要素が中心に表示されてしまいます。 カード表示の場合は、最下段は、上段の位置に合わせた左寄せにしたいんですよね。

パターン2. display:flex

.flex-frame{ display:flex; flex-wrap:wrap; justify-content:space-between; } .flex-frame > *{ flex:1; min-width:80px; max-width:80px; } この方式はうまく言っているようにも見えますが、改行されたitemが2つになった時に、全体のカード配置のバランスが崩れてしまいます。 min,maxのサイズ制限設定を無くすと、よりカードが伸縮されて全体のバランスは良くなるんですが、やっぱり改行がうまくいきません。

パターン3. display:grid

.flex-frame{ display:grid; grid-template-columns:1fr 1fr 1fr } @media(max-width:600px){ .flex-frame{ grid-template-columns:1fr 1fr } } @media(max-width:400px){ .flex-frame{ grid-template-columns:1fr } } 横幅を自動で改行させるわけではないですが、@media（メディアクエリ）を使って、カードの横並びの数を調整するだけで、見た目は一番しっくりくる形になってるので、この方法が最適かな〜と思いました。

あとがき

ホームページを作るのを専門職としてやっている身としては、こうした技術に迷いがある時点で、自分のクオリティはまだまだだな〜と感じてしまう一方。 こうしてやり方が確率していくことで、より効率の良いホームページ制作が出来上がっている感覚を感じることができています。 でも、ホームページで実際に一番時間がかかるポイントって、こういうコーディングじゃなくて、文章や、画像素材などの内容クオリティなんですけどね。