Search code examples
htmlcsscss-grid

In Html using Grid layout how can I make last image align left when we have less than one row of images

I am using a Bootstrap 4, and I have page with a series of images but where there is less images than the space available on the last line I want those images to be left aligned rather than spread over the whole width. So because of this instead of using Bootstrap grid layout based on flexbox I am using 

 <div style="display:grid;grid-template-columns: 
    repeat(auto-fit, minmax(200px, 1fr));grid-gap: 5px;">

and this works great when have more than one row of images:

enter image description here

However if don't have enough images for one row, i.e webpage can accommodate four images but only have two images then it doesn't work:

enter image description here

how can I solve this ?

Relevant Html:

<div style="display:grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 5px;">
    <div class="col">
        <figure class="figure">
            <a href="FixSongsReport00204_changes00021.html">
                <img src="../images/Tolerance - Bop Art (disc 1 Tolerance).jpg" class="figure-img" width="200" height="200">
            </a>
            <figcaption class="figure-caption">
                <a href="FixSongsReport00204_changes00021.html">
                    Tolerance - Bop Art (disc 1 Tolerance)
                </a>
            </figcaption>
        </figure>
    </div>
    <div class="col">
        <figure class="figure">
            <a href="FixSongsReport00204_changes00026.html">
                <img src="../images/Tolerance - Bop Art (disc 2 Bop Art).jpg" class="figure-img" width="200" height="200">
            </a>
            <figcaption class="figure-caption">
                <a href="FixSongsReport00204_changes00026.html">
                    Tolerance - Bop Art (disc 2 Bop Art)
                </a>
            </figcaption>
        </figure>
    </div>
</div>
Solution

  • Modifying code from auto-fit to auto-fill has worked for me.

    e.g

    from 

    <div style="display:grid;grid-template-columns: 
repeat(auto-fit, minmax(200px, 1fr));grid-gap: 5px;">

    to 

    <div style="display:grid;grid-template-columns: 
repeat(auto-fill, minmax(200px, 1fr));grid-gap: 5px;">