Float Images when their is space available

Question

I am making a site like Google Photos in that there is a Home page where I show all the photos uploaded by the user and it looks like this:-

The problem is when there is a big photo in a row (like the image in the middle of 1st row is big) because of that image the image in the next row has that huge gap. Is there any way it should automatically fill in the gaps if it's there! This is the code:-

(I am using Django to fetch the images from the server)

HTML:-

    <div class="container">
        <div class="upload" id="upload" style="display: none">
            <form action="/upload" method="post" enctype="multipart/form-data">{%csrf_token%}
                <input type="file" name="image">
                <button type="submit" class="btn btn-outline-danger">Upload</button>
            </form>
        </div>
        {%for date, image_list in image_day reversed%}

        <div class="home">
            <h4 class="date">{{date}}</h4>
        </div>

        <div class="image-gallery">
            <div class="row">
                {%for i in image_list reversed%}
                <div class="col-md-4" style="padding-top: 1%; padding-bottom: 1%;">
                    <img class="img1" id="img1" src="/media/{{i.image}}" style="width: 100%;"
                        onclick="popup('/media/{{i.image}}')">
                </div>
                {%endfor%}


            </div>
        </div>
        {%endfor%}
    </div>

CSS:-

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

        .home {
            font-family: 'Poppins';
            padding-top: 3%;
        }

        .img1 {
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }

        .image-gallery {
            padding-top: 1%;
        }

        .img1:hover {
            opacity: 0.9;
        }

        .upload {
            padding-top: 3%;
        }
    </style>

Please, Let me know if you want any more information!

You need to use CSS GRID and JavaScript to make it - https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb — Gulam Hussain, Jun 25 '21 at 07:38
The effect is called `masonry` and there are several questions about it. Look here: https://stackoverflow.com/questions/44377343/css-only-masonry-layout — DanieleAlessandra, Jun 25 '21 at 07:41
@DanieleAlessandra, I didn't know that! Thanks for referrals — , Jun 25 '21 at 07:51

Delowar Hosain · Accepted Answer · 2021-06-25T07:47:43.143

You can use CSS column-count for making a masonry gallery. Alternatively, you can use masonry scripts.

CSS Example:

.gallery {
  column-count: 3;
  column-gap: 10px;
}

.item {
  width: 100%;
  margin-bottom: 10px;
}

img {
  width: 100%;
  display: block;
}

  
  <div class="gallery">
    
    <div class="item">
      <img src="https://picsum.photos/200/200" alt="">
    </div>
    
    <div class="item">
      <img src="https://picsum.photos/200/200" alt="">
    </div>
    
    <div class="item">
      <img src="https://picsum.photos/200/100" alt="">
    </div>
    
    <div class="item">
      <img src="https://picsum.photos/200/100" alt="">
    </div>
    
    <div class="item">
      <img src="https://picsum.photos/200/200" alt="">
    </div>
    
    <div class="item">
      <img src="https://picsum.photos/200/150" alt="">
    </div>
    
    <div class="item">
      <img src="https://picsum.photos/200/150" alt="">
    </div>
    
    <div class="item">
      <img src="https://picsum.photos/200/150" alt="">
    </div>
    
  </div>

Result:

Nice, I didn't know about the `column-width` property. One thing I consider worth noting is the order the images are placed: the columns ara filled one after another. So the first few images are all placed in the first row. — Emaro, Jun 25 '21 at 08:07
since it's a column, the order would be like 1, 4, 7 / 2, 5, 8 / 3, 6, 9. So if you need ordering like 1, 2, 3/ 4, 5, 6 (row-wise), I would suggest using a masonry plugin instead. — Delowar Hosain, Jun 25 '21 at 08:10

Float Images when their is space available

HTML:-

CSS:-

1 Answers1