Different height and position for col in bootstrap

Question

I wrote this code for insert image in order to create a grid full of photos:

<section class="gallery-section">

    <div class="container grid-custom" style="padding-top: 50px;">
      <div class="row">

        <div style="padding: 0px;" class="text-center col-md-4 gallery-image">
          <img src="./images/cover.jpg" alt="" class="img-fluid">
        </div>

        <div style="padding: 0px;" class="my-auto text-center col-md-4 gallery-image">
          <img src="./images/passero.jpg" alt="" class="img-fluid">
        </div>

        <div style="padding: 0px;" class="text-center col-md-4 gallery-image">
          <img src="./images/cigno.JPG" alt="" class="img-fluid">
        </div>

      </div>

      <div class="row">

        <div style="padding: 0px;" class="text-center col-md-4 gallery-image">
          <img src="./images/pic1.jpg" alt="" class="img-fluid">
        </div>

        <div style="padding: 0px;" class="text-center col-md-4 gallery-image">
          <img src="./images/fiore.JPG" alt="" class="img-fluid">
        </div>

        <div style="padding: 0px;" class="text-center col-md-4 gallery-image">
          <img src="./images/sfondo7.jpg" alt="" class="img-fluid">
        </div>

      </div>
    </div>

</section>

But I get this result:

What should I do instead to get a result like this?

score 2 · Answer 1 · answered Jul 27 '19 at 15:50

2

What you are looking for is a Masonry Layout.

There are a lot of websites that give nice tutorials. Here for instance I would refer to https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

answered Jul 27 '19 at 15:50

Varon

3,736
21
21

score 2 · Accepted Answer · answered Jul 27 '19 at 16:06

You are placing 3 images per div.row, which results in this layout:

As you can see, the div.row elements are stacked, and each div.row is as high as its highest image, creating gaps for the remaining space in each row.

In summary, you have divided the grid first by rows, and then by columns.

What you need is a masonry grid. As opposite to your approach, this grid is divided first by columns, and then by rows or images.

The main concept behind a masonry grid resides in an approach like this:


<!-- Left column -->
<div class="col-md-4">
    <img src="" alt="Top image">
    <img src="" alt="Middle image">
    <img src="" alt="Bottom image">
</div>

<!-- Center column -->
<div class="col-md-4">
    <img src="" alt="Top image">
    <img src="" alt="Middle image">
    <img src="" alt="Bottom image">
</div>

<!-- Right column -->
<div class="col-md-4">
    <img src="" alt="Top image">
    <img src="" alt="Middle image">
    <img src="" alt="Bottom image">
</div>

Different height and position for col in bootstrap

2 Answers2