HTML库有4列而不是3列

Question

我需要知道，因为确定这些代码行包​​含4列。我需要这个灵活。因为在某些情况下我只占用2或3张图像。我遇到的问题是，无论你调用多少图像，容器总是考虑有4.我无法弄清楚如何修改它。我很感激你的帮助。

<ul class="photo-gallery">
    <li>
        <figure>
            <div class="gallery-item">
                <a href="Asphalt_A3.jpg">
                    <img src="lTireBtn1.jpg" alt="">
                    <figcaption>
                        <div class="centrize">
                            <div class="v-center">
                                <i class="hc-search"></i>
                            </div>
                        </div>
                    </figcaption>
                </a>
            </div>
        </figure>
    </li>
    <li>
        <figure>
            <div class="gallery-item">
                <a href="Asphalt_A2.jpg">
                    <img src="TireBtn2.jpg" alt="">
                    <figcaption>
                        <div class="centrize">
                            <div class="v-center">
                                <i class="hc-search"></i>
                            </div>
                        </div>
                    </figcaption>
                </a>
            </div>
        </figure>
    </li>
    <li>
        <figure>
            <div class="gallery-item">
                <a href="Asphalt_A1.jpg">
                    <img src="TireBtn3.jpg" alt="">
                    <figcaption>
                        <div class="centrize">
                            <div class="v-center">
                                <i class="hc-search"></i>
                            </div>
                        </div>
                    </figcaption>
                </a>
            </div>
        </figure>
    </li>
</ul>