カード敷き詰めレスポンシブレイアウトの一番楽な方法

  • ディスプレイサイズごとに何列にするか決める
  • カードのwidthはパーセント
  • 2列のときだけ width calc() 使用
  • 2列にさせるディスプレイサイズのみFlexbox / space-betweenを指定
  • 3列以上はwidthパーセントを小数点2桁以上指定
  • 3列以上のコンテナに余白分のネガティブマージンをmargin-right指定
  • 余白はピクセル固定

Flexbox / calc / vwなどを併用すれば容易に解決できそうに思えるが、難易度が何倍にも膨れ上がりむしろ実現不可能。
ネガティブマージンは使いたくないが、これが一番楽なので仕方ない。

「Flexbox / space-betweenを全デバイスで使えばいいんじゃね?」

それは意図せぬレイアウトになると過去に指摘済み。

Flexbox・弱点と思い込んでいた天地中央背景伸ばしを解決! 改行問題は未だ弱点。

「カード間の余白を、固定ピクセルじゃなく相対パーセントにしたいとクライアントが言ってきたら?」

そのこだわりに何か意味がありますか?と逆に質問しよう。
サイト訪問者にとって無意味なこだわりは時間の無駄。

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。