CSSのFlexboxとcalc()関数を使って簡単にレスポンシブ対応3カラムカードレイアウトを作成する方法を備忘録としてまとめておきます。デスクトップ表示時は3カラム、タブレット表示時は2カラム、モバイル表示は1カラムにするなどのレイアウトをいちいち幅やマージンを細かく計算して実装する必要がないので、自分的には重宝しています。※注)calc()関数はモダンブラウザにサポートされていて使いやすいですが、FlexboxはIE6-9(IE10はベンダープレフィックスで対応)には対応していないので旧IE6-9をサポートするサイトを構築する場合は注意が必要です。
3カラムカードレイアウトデモ
下のデモのようなカードレイアウトが簡単にできます。ウインドウ幅を変えるとカラム数が変化します。

カードレイアウト1
Flexboxとcale()を使ってかんたんにカードレイアウトをつくる手順のご紹介

カードレイアウト2
Flexboxとcale()を使ってかんたんにカードレイアウトをつくる手順のご紹介

カードレイアウト3
Flexboxとcale()を使ってかんたんにカードレイアウトをつくる手順のご紹介

カードレイアウト4
Flexboxとcale()を使ってかんたんにカードレイアウトをつくる手順のご紹介

カードレイアウト5
Flexboxとcale()を使ってかんたんにカードレイアウトをつくる手順のご紹介
カードレイアウトHTMLサンプル
カードレイアウトのHTML例は以下のソースをご確認ください。カード部分は<section>
で全体囲んでいます。この<section>
にcalc()
関数で幅をサイズごとに指定します。
カードレイアウトCSSサンプル
カードレイアウト全体をラッピングしている、<div id="cardlayout-wrap">
にFlexboxを指定して、横並びレイアウトと均等割り付けのになるようにします。そして<section>
をcalc()関数でレイアウトします。
このレイアウトは100%を2や3割っているので、下図のようにカード同士左右のマージンが無いレイアウトになってしまいます。そのレイアウトが目的ならこのCSSでも問題ありませんが、左右にマージをもたせたい場合は少し記述を変えます。

カードレイアウト左右にマージンを持たす場合
左右にマージンを持たす場合はカードレイアウトの幅を100%から割っていたのを少し小さくすれば、マージンを持たすことができます。
100%より少し少ない幅をして割ってやると、幅が短い分が余ります。そしてカードレイアウトを均等割り付けしてやると、下図のように左右にマージンができます。

まとめ
Flexboxとcalc()関数でめんどくさい計算をしなくても、簡単にカードレイアウトができました。Flexboxを使っているので、カードごとの高さも自動で調節してくれます。当サイトのトップページの記事一覧も今回のCSSと同じような感じでレイアウトしています。もし気に入ってくだされば使ってみてください。