PC表示とスマホ表示時の画像配置を自動で変える

Question

前提

pc表示では画像が1行目に5つ2行目に4つ
スマホ表示では画像が1～3行目に3つずつ
みたいな感じで画面サイズによって自動で配置が換わるようにしたいです。
バルーンキッチンのusecaseの「結婚式」「誕生日」などのイラスト欄のようにしたいです。
リンク内容https://www.balloon-kitchen.com/?utm_source=yahoo&utm_medium=cpc&yclid=YSS.1001013012.EAIaIQobChMIuK-wts3F-QIVw8qWCh1T-AsOEAAYASAAEgLtb_D_BwE

実現したいこと

画面サイズに合わせて画像サイズは変えずに配置だけ変わるようにしたい。

発生している問題・エラーメッセージ

・改行が1段目3枚、2段目1枚、3段目3枚みたいな感じになる（上から詰めてくれない）
・左右がそろわない
・画像同士の間の間隔がバラバラになる

該当のソースコード

今回の質問の該当するソースコードが分からないので質問させて頂いてます。
的外れなことを言っていたらすみません。

試したこと

・<wbr>を使った改行（HTMLにCSSを入れて行った）
・バルーンキッチンのHTMLを見て<li>使用したもの
↳調べてやってみたが、使い方がよく分からなかった。

補足情報（FW/ツールのバージョンなど）

カラーミーショップで使います。

Answer 1

リンク先は、li要素にdisplay: inline-blockを設定して横並びにして、折り返されるようにしていますね。
あと、親要素にtext-align: centerで中央寄せです。

<ul class="iconlist">
  <li>
    <img src="" alt="">
  </li>
  <li>
    <img src="" alt="">
  </li>
  <li>
    <img src="" alt="">
  </li>
  <li>
    <img src="" alt="">
  </li>
  <li>
    <img src="" alt="">
  </li>
  <li>
    <img src="" alt="">
  </li>
  <li>
    <img src="" alt="">
  </li>
  <li>
    <img src="" alt="">
  </li>
  <li>
    <img src="" alt="">
  </li>
</ul>

ul.iconlist {
    text-align: center;
}
ul.iconlist > li {
  display: inline-block;
}

今なら、Flexboxを使うのが主流です。

ul.iconlist {
  display: flex;
  flex-wrap:wrap;
  justify-content:center;
}

Comments

[yukomebo]

ありがとうございます。

ちなみに画像同士に一定の間隔で空白を開ける場合はどうしたらいですか？
例）ああああああああ→あ　あ　あ　あ　あ　あ　　（「あ」を画像と仮定する）

それと画像一つ一つにリンクを貼る場合はどこに<a href></a>を入れたらいいですか？

[hatena19]

inline-block を使う方法なら、li要素に余白(margin か padding)をつければいいでしょう。
flex なら、gapを使えばいいでしょう。
ul.iconlist {
display: flex;
flex-wrap:wrap;
justify-content:center;
gap: 5px;
}

画像にリンクはimg要素をa要素で囲めばいいでしょう。
<a href=""><img src="" alt=""></a>

[yukomebo]

ありがとうございます！