부트스트랩 4 Masonry를 이용하여 핀터레스트 스타일 레이아웃 만들기 / Bootstrap 4 Masonry

부트스트랩 4에서 Masonry를 이용하여

핀터레스트 스타일의 반응형 레이아웃 만들기

소스는 아래 첨부해두었습니다

 

 

 

CSS

.grid-item{margin-bottom:1.5rem;}

 

 

HTML

<div class="grid">
    <div class="grid-sizer col-sm-6 col-md-4 col-lg-3"></div>
    <div class="grid-item col-sm-6 col-md-4 col-lg-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">111 Title</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <div class="grid-item col-sm-6 col-md-4 col-lg-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">222 Title</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a class="card-link">Card link</a>
          <a class="card-link">Another link</a>
        </div>
      </div>
    </div>
    <div class="grid-item col-sm-6 col-md-4 col-lg-3">
      <div class="card">
        <img src="http://placehold.it/300x200" class="img-fluid">
        <div class="card-body">          
          <h5 class="card-title">333 Title</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a class="card-link">Card link</a>          
        </div>
      </div>
    </div>
    <div class="grid-item col-sm-6 col-md-4 col-lg-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">444 Title</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a class="card-link">Card link</a>
          <a class="card-link">Another link</a>
        </div>
      </div>
    </div>
    <div class="grid-item col-sm-6 col-md-4 col-lg-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">555 Title</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a class="card-link">Card link</a>
          <a class="card-link">Another link</a>
        </div>
      </div>
    </div>
    <div class="grid-item col-sm-6 col-md-4 col-lg-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">666 Title</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a class="card-link">Card link</a>
          <a class="card-link">Another link</a>
        </div>
      </div>
    </div>
    <div class="grid-item col-sm-6 col-md-4 col-lg-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">777 Title</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a class="card-link">Card link</a>
          <a class="card-link">Another link</a>
        </div>
      </div>
    </div>
    <div class="grid-item col-sm-6 col-md-4 col-lg-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">888 Title</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a class="card-link">Card link</a>
          <a class="card-link">Another link</a>
        </div>
      </div>
    </div>
  </div>

 

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

 

 

JS

$('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    percentPosition: true
  });

 

Bootstrap 4 Mansonry.html

0.00MB

 

 

참고 사이트 : https://masonry.desandro.com/