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

Question

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:

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:

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>

You can't do that with `auto-fit` because `auto-fit` FITS the CURRENTLY AVAILABLE columns into the space by **expanding them** so that they take up any available space. — Paulie_D, Jul 13 '19 at 18:27
@Paulie_D Diont know if you were trying to give me a cryptic clue but changing auto-fit to auto-fill seems to work — Paul Taylor, Jul 15 '19 at 14:02

score 0 · Answer 1 · answered Jul 12 '19 at 13:36

0

If you're already using Boostrap 4, I see no reason not to use the default Boostrap grid system (flexbox) for this. To force divs to a certain width rather than filling the empty horizontal space, simply assign column widths to the divs in question. So instead of div class="col", you would use div class="col-sm-4" or similar.

answered Jul 12 '19 at 13:36

Drew McDowell

19
2

There isnt a particular width I want to force to, it depends on users screen size, I just want it left align the last row, this is what I get when I was using Bootstraps grid system - https://stackoverflow.com/questions/56851741/using-bootstrap-grid-how-do-i-make-last-items-left-align-rather-than-spread-over – Paul Taylor Jul 12 '19 at 13:49

score 0 · Accepted Answer · answered Jul 16 '19 at 06:32

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;">

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

2 Answers2