今回は、display:gridを手早く使うスニペットを掲載しています。
ホームページを作る時に、画像やカード的な物を並べる一覧リスト的な表示が必要な場合があります。
リスト表示と一言で言っても、色んな種類があり、次のようなパターンをそれぞれの用途で使い分けるようにしています。
リスト型
- リスト-1
- リスト-2
- リスト-3
- リスト-4
- リスト-5
テーブル型
| # |
Name |
Type |
Level |
| 1 |
HTML |
Cording |
★☆☆ |
| 2 |
CSS |
Cording |
★☆☆ |
| 3 |
Javascript |
Programing |
★★☆ |
| 4 |
PHP |
Programing |
★★★ |
カード型
Book
Link
Mail
News
School
カード型の難易度を知る
実際にコーディングしたことがある人はわかると思いますが、カード型と一言で言っても実は様々な難しさがあります。
この形式をよく見かけるのは、
ECサイトや、
画像一覧を表示するような場合に使いますが、難しさのポイントとしては、
横幅に応じて横並び人表示するカードの個数が変更されるような場合です。
一定の数を、固定値で表示する場合は難しくもないんですが、いわゆるレスポンシブ表示をする場合には、どのように組み立てればいいかという難しさに直面するでしょう。
そのコーディングにも、何パターンもやり方が存在しています。
ちなみに、Tableタグで記述すると、横並びの個数が固定されてしまうので、今回のパターンからは外しています。
パターン1. display:inline-block
パターン2. display:flex
パターン3. display:grid
以下に、それぞれのパターン別のサンプルを表示してみるので、ブラウザサイズを変更して、お気に入りを見つけてください。
パターン1. display:inline-block
Book
Link
Mail
News
School
.inline-frame{
text-align:center;
}
このパターンは、表示する画面幅（親要素の幅）に応じて、エレメントが自動で改行してくれるので、良い感じに表示できるかと思われますが、
デフォルトの状態では、左寄せになってしまい、
text-alignをcenterをセットすると、最下段に改行された要素が中心に表示されてしまいます。
カード表示の場合は、最下段は、上段の位置に合わせた左寄せにしたいんですよね。
パターン2. display:flex
Book
Link
Mail
News
School
.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
Book
Link
Mail
News
School
.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（メディアクエリ）を使って、カードの横並びの数を調整するだけで、見た目は一番しっくりくる形になってるので、この方法が最適かな〜と思いました。
あとがき
ホームページを作るのを専門職としてやっている身としては、こうした技術に迷いがある時点で、自分のクオリティはまだまだだな〜と感じてしまう一方。
こうしてやり方が確率していくことで、より効率の良いホームページ制作が出来上がっている感覚を感じることができています。
でも、ホームページで実際に一番時間がかかるポイントって、こういうコーディングじゃなくて、文章や、画像素材などの内容クオリティなんですけどね。
