时间戳

首页 > 解决方案 > Different height and position for col in bootstrap

html - Different height and position for col in bootstrap

问题描述

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: enter image description here

What should I do instead to get a result like this? enter image description here

标签： htmlcssbootstrap-4

解决方案

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/

推荐阅读