ブログデザイン備忘録～カードデザイン2

前回のカードデザインはコンテンツが少ない場合として2つのカードを中央に並べるデザインを紹介した。

今回はコンテンツがたくさんある場合にカードをページ内に並べる方法について紹介する。

.container {
  display: flex;
  flex-wrap: wrap;
}

display:flex;としてflex-wrap:wrap;とすると要素が入りきらない場合自動的に改行する。これにより様々なディスプレイに対してもページいっぱいにカードが並んだデザインになる。ただし文字やカード幅をディスプレイサイズに対しておおまかに調整するためメディアクエリを用いた。

@media(max-width: 896px){
  .card{width:40%;}
  .card-title{font-size:50%;}
  .card-text{font-size:30%;}
}

以下CodePenの1x/0.5xではカードが2x4、0.25xでは4x2のレイアウトになる。メディアクエリでフォントサイズや幅を調整すれば、カードが間延びするようなことが防げる。

See the Pen card design2 by ATATAT (@atatat) on CodePen.

つれづれなる備忘録