CSS サイズの揃わないli要素を複数行/不等分で並べる

サイズの揃わない画像を下の数字のような並びにしたいです。
指定された１行にある数が３個・４個・２個と決まっていないので、うまく並べられません。

　　１　　２　　３　　
　　４　５　６　７　　
　　　８　　　９　　　

flexのspace-aroundできれいに並ぶかと思ったのですが、レスポンシブ指定のため拡縮で１行にある数が変化してしまいます。(拡縮で画像間の余白が変化するデザインです)
li要素のため、１行ずつをspan等で囲んだり、brで改行するわけにもいかず１行に収まる画像の数を指定できないのですが、どうするべきでしょうか。
適切な方法をご教授ください。

<ul class="list-img">
    <li class="img"></li>
    <li class="img"></li>
    <li class="img"></li>
    <li class="img"></li>
    <li class="img"></li>
    <li class="img"></li>
    <li class="img"></li>
    <li class="img"></li>
    <li class="img"></li>
</ul>


.list-img{
    align-items: center;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .img{
        display: inline-block;
    }
}