Displaying Gallery Page with CSS

Question

This my displayed gallery:

And this is what I want

I want to displayed image like that, a little messy but awesome

And this my trouble when some image have different height

there have whitespace and does not automatically fill the whitespace section So this whitespace should be fill.

This my HTML & CSS Code :

.detail-img{
   width: 23%;
   margin: 10px;
   position: relative;
   min-height: 280px;
   max-height: 450px;
}
.galeri-row{
    margin: auto;
}

.galeri-row img{
    border-radius: 15px;
    object-fit: cover;
    object-position: center;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<section>
  <div class="container">
    <div class="row galeri-row justify-content-md-center">
      <a href="#" class="detail-img">
        <img src="img/src">
        <div class="detail-text">
          <span class="my-tag btn-success">TAG</span>
          <p>
          Lorem ipsum dolor sit amet consectetur...
          </p>
        </div>
      </a>
      <a href="#" class="detail-img galeri-sm">
        <img src="img/src">
        <div class="detail-text">
          <span class="my-tag btn-success">TAG</span>
          <p>
          Lorem ipsum dolor sit amet...
          </p>
        </div>
      </a>
      <a href="#" class="detail-img galeri-sm">
        <img src="img/src">
        <div class="detail-text">
          <span class="my-tag btn-success">TAG</span>
          <p>
          Lorem ipsum dolor sit amet...
          </p>
        </div>
      </a>
      <a href="#" class="detail-img">
        <img src="img/src">
        <div class="detail-text">
          <span class="my-tag btn-success">TAG</span>
          <p>
          Lorem ipsum dolor sit amet...
          </p>
        </div>
      </a>
           ...................
        </div>
   </div>
</section>

This is commonly known as a "masonry" layout. Bootstrap 4 solution: https://stackoverflow.com/questions/48468140/bootstrap-4-masonry-layout-utilizing-flexbox-grid — Turnip, Sep 02 '20 at 11:07

score -1 · Answer 1 · answered Sep 02 '20 at 11:03

-1

if you want to stick to fixed column layout I would use flexbox, with a flex-direction: column, to manage each column individually

answered Sep 02 '20 at 11:03

baband

123
12

Displaying Gallery Page with CSS

1 Answers1