Equally spaced gallery image thumbnails

Question

I'm trying to create a gallery page, in which I have to place a variable amount of images. For example, let's say I place 6 images in this way:

<link href="/stylesheets/gallery_gen.css" media="screen" rel="stylesheet" type="text/css">

<div class="my-gallery-contain" itemscope itemtype="http://schema.org/ImageGallery">

    <div class="my-gallery">
        <figure class="my-gallery-fig" classitemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="/img/gallery/matera/4.jpg" itemprop="contentUrl" data-size="600x400">
                <img src="/img/thumbs/matera/4.jpg" itemprop="thumbnail" alt="Image description" />
            </a>
            <!--<figcaption itemprop="caption description"><p class="galleryCap">Image caption</p></    figcaption>-->
        </figure>
        <figure class="my-gallery-fig" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="/img/gallery/matera/5.jpg" itemprop="contentUrl" data-size="600x400">
                <img src="/img/thumbs/matera/5.jpg" itemprop="thumbnail" alt="Image description" />
            </a>
        </figure>
        <figure class="my-gallery-fig" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="/img/gallery/matera/6.jpg" itemprop="contentUrl" data-size="600x400">
                <img src="/img/thumbs/matera/6.jpg" itemprop="thumbnail" alt="Image description" />
            </a>
        </figure>
        <figure class="my-gallery-fig" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="/img/gallery/matera/7.jpg" itemprop="contentUrl" data-size="600x400">
                <img src="/img/thumbs/matera/7.jpg" itemprop="thumbnail" alt="Image description" />
            </a>
        </figure>
        <figure class="my-gallery-fig" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="/img/gallery/matera/8.jpg" itemprop="contentUrl" data-size="600x400">
                <img src="/img/thumbs/matera/8.jpg" itemprop="thumbnail" alt="Image description" />
            </a>
        </figure>
        <figure class="my-gallery-fig" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="/img/gallery/matera/28.jpg" itemprop="contentUrl" data-size="600x400">
                <img src="/img/thumbs/matera/28.jpg" itemprop="thumbnail" alt="Image description" />
            </a>
        </figure>
    </div>

</div>

CSS:

.my-gallery-contain {
    margin: -20px 0px -20px;
}

.my-gallery img {
    width: 300px;
    margin: 0;
    padding: 0;

}

.my-gallery-fig {
    margin: 2px;

    height: 200px;
    overflow: hidden;
    display: inline-block;

}

However, only the first row gets equally spaced. The result I obtain is this one: https://i.sstatic.net/71s79.jpg

If I hade another row, only the first two rows get equally spaced. The last row is always the one not equally spaced.

How can I fix this?

Another question: if I want to have a fixed margin of 2px between an image and the one next to it, how can I let the thumbs automatically resize in order to fit the div? (in the scree I posted, the second row has the right margins,but the images should be automatically resized in order to fit the outer div, so that the left margin of the image on the right is the same as the right margin of the image on the left)

Answer 1

I do not know why the images don't have an overall margin of 4px between them. Might be due to css settings applied globally or just the container, I would need more code to know what exactly is wrong.

What you can do to fix this, and also to facilitate adding images later on, is using css grid with a flexbox fallback for browsers that don't yet support the grid layout.

Both of those methods have the perks of being more responsive as well as more adjustable in the future.

CSS Grid:

@supports (display: grid) {
    figure {
        padding: 0;
        margin: 0;
    }
    .my-gallery {
        display: grid;
        /* space between containers */
        grid-gap: 2px;
    }
    .my-gallery {
        grid-template-columns: repeat(3, 300px);
        grid-template-rows: 200px 200px;
        grid-template-areas: "img1   img2   img3" "img4   img5   img6";
    }
    /* positions */
    .my-gallery-fig:nth-child(1) { grid-area: img1; }
    .my-gallery-fig:nth-child(2) { grid-area: img2; }
    .my-gallery-fig:nth-child(3) { grid-area: img3; }
    .my-gallery-fig:nth-child(3) { grid-area: img4; }
    .my-gallery-fig:nth-child(3) { grid-area: img5; }
    .my-gallery-fig:nth-child(3) { grid-area: img6; }
    /* end of positions */
    .my-gallery-fig a {
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    .my-gallery-fig img {
        display: block;
        width: auto;
        height: 100%;
        margin: auto;
    }
}

Flexbox fallback:

@supports not (display: grid) {
    figure {
        padding: 0;
        margin: 0;
    }
    /* width accounts for image size and margins */
    .my-gallery {
        display: flex;
        width: 904px;
        flex-flow: row wrap;
    }
    .my-gallery-fig {
        flex: 0 1 300px;
        height: 200px;
        margin: 0 2px 2px 0;
    }
    /* last image of every row has no right margin */
    .my-gallery-fig:nth-child(3n) {
        margin-right: 0;
    }
}

I did the coding based on your given dimension. You should be able to tweak the dimensions to suit your needs in the future.

Some additional resources:
MDN on CSS Grid
MDN on "flex"

I hope this helps!

P.S: you can experiment with this: https://codepen.io/iamdeja/pen/zPwwXO