티스토리 뷰

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 버전인데 아직까지는 정렬 기준을 제어 할 수 있게 제공되지는 않고 있다.

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

'Web-Frontend > CSS' 카테고리의 다른 글

textarea 가로 고정  (0) 2017.06.19
Bootstrap4를 사용한 Masonry gird  (0) 2017.04.07
TD 폭에 맞추어 자동 줄바꿈  (1) 2011.07.29
Html 테이블 해더 고정하기  (0) 2011.07.29
댓글
댓글쓰기 폼
공지사항
Total
198,678
Today
16
Yesterday
14
«   2018/05   »
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
글 보관함