Bootstrap4를 사용한 Masonry gird

Bootstrap4 를 사용한 Masonry 스타일 구현

목표 : 핀터레스트 같은 그리드를 표현하기 위해 사용하던 masonry.js를 bootstrap4의 card-columns 을 이용하여 구현.

Bootstrap4 문서를 보다가 flex를 이용하여 Masonry를 구현이 가능하다 라는 내용을 보고 실제로 테스트 해 보았음.

기본 모양 자체는 Bootstrap4 document 를 사용하여 쉽게 구현이 가능 하다.

<div class="card-columns">
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card 1</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card">
    <blockquote class="card-block card-blockquote">
      <p>Card 2</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card 3</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-inverse card-primary p-3 text-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card p-3 text-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

이제 bootstrap.css 파일을 찾아 보자.

@media (min-width: 576px) {
  .card-columns {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
    -webkit-column-gap: 1.25rem;
       -moz-column-gap: 1.25rem;
            column-gap: 1.25rem;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
    margin-bottom: 0.75rem;
  }
}

column-count 로 열의 갯수를 column-gap 로 열의 간격을 지정하게 되어 있다.

행간격은 card-columns 내의 card의 속성을 이용하여 조정이 가능하다.

문제는 card-columns 내의 각 column의 정렬기준.

아직은 각 컬럼이 위에서 아래로, 왼쪽에서 오른쪽으로 정렬이 되게 되어 있다.

현재 지원	목표
1  3  6 2  4  7 5	1  2  3 4  5  6 7

결국 다시 masonry.js 로....

현재 Bootstrap 은 alpha6 버전인데 아직까지는 정렬 기준을 제어 할 수 있게 제공되지는 않고 있다.

추후 버전에서 이부분이 개선 되었으면 좋겠다.