如何消除图像网格周围多余的填充

Question

我是 CSS 新手。我使用 flex 制作了一个 3x3 图像网格。有没有办法消除边缘图像周围的填充？我添加了一个屏幕截图来解释我的意思。我可以想到一种方法，那就是向某些图像添加特定的类以使其 padding-left 或 padding-right = 0 但我感觉有更好的方法来实现这一点。

谢谢

CSS

    .wrapper--gallery {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 1rem 1rem 0.5rem 1rem;
        background-color: $alabaster;
        @include tablet {
            padding: 0 2.25rem 1.75rem 2.25rem;
        }
    
    }
    
    .gallery__img-list {
    
        @include tablet {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }
    }
    
.gallery__img {
    padding: 0.5rem 0;
    width: 100%;
    height: auto;

    @include tablet {
        width: 33%; // get to 3 columns 
        padding: 0.5rem;
        
    
    }
}

HTML

<section class="wrapper--gallery">
    <h2 class="gallery__title">Photo Gallery</h2>
    <ul class="gallery__img-list">
        <li class="gallery__img"><img src="assets/images/Photo-gallery-1.jpg" alt="crowd with raised hands at a concert, backlit with vibrant pink stage lights"></li>
        <li class="gallery__img"><img src="assets/images/Photo-gallery-2.jpg" alt="silhouette of a woman dancing energetically on stage under green and blue lights"></li>
        <li class="gallery__img"><img src="assets/images/Photo-gallery-3.jpg" alt="concert crowd raising their hands under a wash of pink stage lighting"></li>
        <li class="gallery__img"><img src="assets/images/Photo-gallery-4.jpg" alt="woman at a concert dancing with excitement, spotlighted by white stage beams"></li>
        <li class="gallery__img"><img src="assets/images/Photo-gallery-5.jpg" alt="energetic concert with crowd and fireworks display under purple lighting"></li>
        <li class="gallery__img"><img src="assets/images/Photo-gallery-6.jpg" alt="woman reaching out passionately at a concert with sparkling white lights and fog"></li>
        <li class="gallery__img"><img src="assets/images/Photo-gallery-7.jpg" alt="colorful concert with large crowd, vibrant lights and lasers illuminating the stage"></li>
        <li class="gallery__img"><img src="assets/images/Photo-gallery-8.jpg" alt="close-up of a dj's hands adjusting controls on a turntable under ambient lighting"></li>
        <li class="gallery__img"><img src="assets/images/Photo-gallery-9.jpg" alt="wide shot of a concert crowd with hands up, confetti falling under blue lighting"></li>
    </ul>
</section>

Answer 1

将此添加到 CSS 以删除边缘的填充

.gallery__img:nth-child(3n+1) {
        padding-left: 0;
    }

    .gallery__img:nth-child(3n) {
        padding-right: 0;
    }

    .gallery__img:nth-child(-n+3) {
        padding-top: 0;
    }

    .gallery__img:nth-last-child(-n+3) {
        padding-bottom: 0;
    }