【CSS】Flexboxとcalc()で簡単レスポンシブ対応3カラムカードレイアウト！

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

3カラムカードレイアウトデモ

下のデモのようなカードレイアウトが簡単にできます。ウインドウ幅を変えるとカラム数が変化します。

カードレイアウトHTMLサンプル

カードレイアウトのHTML例は以下のソースをご確認ください。カード部分は<section>で全体囲んでいます。この<section>にcalc()関数で幅をサイズごとに指定します。

カードレイアウトCSSサンプル

カードレイアウト全体をラッピングしている、<div id="cardlayout-wrap">にFlexboxを指定して、横並びレイアウトと均等割り付けのになるようにします。そして<section>をcalc()関数でレイアウトします。

このレイアウトは100%を2や3割っているので、下図のようにカード同士左右のマージンが無いレイアウトになってしまいます。そのレイアウトが目的ならこのCSSでも問題ありませんが、左右にマージをもたせたい場合は少し記述を変えます。

カードレイアウト左右にマージンを持たす場合

左右にマージンを持たす場合はカードレイアウトの幅を100%から割っていたのを少し小さくすれば、マージンを持たすことができます。

100%より少し少ない幅をして割ってやると、幅が短い分が余ります。そしてカードレイアウトを均等割り付けしてやると、下図のように左右にマージンができます。

まとめ

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