Search code examples
jquerycssalignmentgallery

Left-align last gallery row

I have a picture gallery that looks like: enter image description here

The code looks like:

<div class="wrapper">
    <div id="squares">
        <a href="yourlinkhere1.php"><img src="images/galleryimage1.jpg"></a>
        <h5>IMG_114</h5>
    </div>
    <div id="squares">
        <a href="yourlinkhere2.php"><img src="images/galleryimage2.jpg"></a>
        <h5>IMG_115</h5>
    </div>
</div>

The CSS looks like:

.wrapper {
    background: #ff0000;
    text-align: center;
}

#squares {
    background: #00ff00;
    display: inline-block;
    vertical-align: top;
    width: 300px;
}

#squares img {
    max-height: 200px;
    width: auto;
}

#squares h5 {
    margin: 20px 0;
}

I like how it turned out, but I would like IMG_117 to align under IMG_114, while keeping the green area centered and the content in the div centered...Not sure how to get that div aligned left without un-centering something else.

I was thinking this could be a quick tweak to my css or maybe some jQuery to add two more columns to the IMG_117 row. The issue I see though is this is dynamic content and I won't always know how many are in the last row...could be one, two, or three and if there is some jQuery it would need to check and see how many items are in the row and then add the missing columns.

I'm not sure which approach is the easiest or if there is a better solution out there...does anyone have any ideas or can anyone point me in the right direction?

Thanks,
Josh

Solution

  • You can use the flexbox solution for more fluid and flexible layout see the solution at codepen below.

    .wrapper {
    background: #ff0000;
    text-align: center;
    width: 100%;
    height:auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 5% 0;
}

    Codepen

    https://codepen.io/ahmedi/pen/KvVgQW