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

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

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

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

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

カードレイアウト1

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

カードレイアウト2

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

カードレイアウト3

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

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

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

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

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

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

100%で割ったときのカードレイアウト

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

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

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

96%で割ったときのカードレイアウト

まとめ

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


JunJunWeb.Netの新着情報を受け取るには
SNSアカウントをフォローすると便利