カード敷き詰めレスポンシブレイアウトの一番楽な方法
- ディスプレイサイズごとに何列にするか決める
- カードのwidthはパーセント
- 2列のときだけ width calc() 使用
- 2列にさせるディスプレイサイズのみFlexbox / space-betweenを指定
- 3列以上はwidthパーセントを小数点2桁以上指定
- 3列以上のコンテナに余白分のネガティブマージンをmargin-right指定
- 余白はピクセル固定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <div id="container"> <div class="block-opus"> <article> <div class="item-img"><img src="images/ph-01.jpg"></div> <div class="item-text">テキスト</div> </article> <article> <div class="item-img"><img src="images/ph-02.jpg"></div> <div class="item-text">テキスト</div> </article> <article> <div class="item-img"><img src="images/ph-03.jpg"></div> <div class="item-text">テキスト</div> </article> <article> <div class="item-img"><img src="images/ph-04.jpg"></div> <div class="item-text">テキスト</div> </article> 以下略 <!-- /.block-opus --></div> <!-- /#container --></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | #container { padding: 20px; } .block-opus { display: flex; flex-wrap: wrap; @include max(1279) { justify-content: space-between; } @include min(1280) { margin-right: -10px; } article { width: 100%; display: flex; margin-bottom: 10px; padding: 10px; background: white; @include min(768) {width: calc(50% - 5px);} @include min(1280) { width: 32.52%; margin-right: 10px; } @include min(1600) {width: 24.35%;} @include min(1920) {width: 19.47%;} @include min(2560) {width: 13.89%;} } .item-img { width: 140px; font-size: 0; margin-right: 10px; } .item-text { flex: 1; } } |
Flexbox / calc / vwなどを併用すれば容易に解決できそうに思えるが、難易度が何倍にも膨れ上がりむしろ実現不可能。
ネガティブマージンは使いたくないが、これが一番楽なので仕方ない。
「カード間の余白を、固定ピクセルじゃなく相対パーセントにしたいとクライアントが言ってきたら？」
そのこだわりに何か意味がありますか？と逆に質問しよう。
サイト訪問者にとって無意味なこだわりは時間の無駄。
コメントを投稿する