レスポンシブデザインを考慮して画像を並べる際の CSS について

実現したいこと

ブラウザの横幅に合わせて横並び画像数を変化させて並べたい。

発生している問題・分からないこと

Q＆A 質問掲示板を作成しており質問一覧を並べるために CSS を書いております。
通常は横一列に4件並べてブラウザによって数を変化させるか、画像を拡大して数を維持するか悩んでおります。
アドバイスお願い致します。

該当のソースコード

HTML

1<div class="image-inline-player"> 2<div class="image-card-wrap" style="display: inline-block;"> 3<a href=""><div class="image-thumbnail-card"> 4<img src=""> 5</div> 6<div class="image-title-link">タイトルテスト1タイトルテスト1タイトル... 7</div> 8</a> 9</div> 10<div class="image-card-wrap" style="display: inline-block;"> 11<a href=""><div class="image-thumbnail-card"><img src=""> 12</div> 13<div class="image-title-link">タイトルテスト2タイトルテスト2タイトル... 14</div> 15</a> 16</div> 17<div class="image-card-wrap" style="display: inline-block;"> 18<a href=""><div class="image-thumbnail-card"><img src=""> 19</div> 20<div class="image-title-link">タイトルテスト3タイトルテスト3タイトル... 21</div> 22</a> 23</div> 24<div class="image-card-wrap" style="display: inline-block;"> 25<a href=""><div class="image-thumbnail-card"><img src=""> 26</div> 27<div class="image-title-link">タイトルテスト3タイトルテスト3タイトル... 28</div> 29</a> 30</div> 31</div>

css

1/* 雑談掲示板　一覧表示画面本体定義 */2.image-inline-player {3 width: 1140px;4 margin: 0 auto 50px;5 background-color: #fff;6 border: 2px solid #999;7 clear: both;8}9 10/* 雑談掲示板　一覧表示画面本体定義 */11.image-inline-player .image-card-wrap {12 width:260px; /* 枠の横幅 */13 margin: 23px 0px 23px 19px; /* 枠のスペース */14 vertical-align:top; /* 上端に揃える */15 word-wrap:break-word; /* 文字を改行し枠内に収める */16 display:inline-block; /* <li>要素を横に並べる */17 /* display:inline; */18 zoom:1; 19}20 21/* 雑談掲示板　一覧表示画面配置位置 */22.image-inline-player .image-card-wrap .image-title-link {23 font-size: 150%;24 font-weight: 700;25 letter-spacing: .1em;26}27 28/* 雑談掲示板　一覧表示画面の画像配置位置 */29.image-inline-player .image-card-wrap .image-thumbnail-card {30 height: 150px; /* 画像の高さ */31 width: 260px; /* 画像の横幅 */32}

試したこと・調べたこと

上記の詳細・結果

参考サイトを見たところ画像を並べることは出来たのですが、ブラウザが変化した際に右端にコンテンツが追加するスペースが足りない場合に間隔が空いてしまいデザインが崩れるのではないかと心配しております。

補足

※参考サイト
https://ecsiter.com/limage