column-count 속성을 사용하여 masonry를 구현할때 주의할 점

최근에 column-count 속성을 사용하여 masonry를 구현한 일이 있었다.

자세한 설명은 아래의 링크를 참조하면 된다.

https://codepen.io/AdamBlum/pen/fwrnE

위의 링크에서는 article에 column-count 속성이 적용되었고, section에서는 display: inline-block 속성이 적용되어 있다.

이렇게 될 경우 신기하게도 section을 article이 잘 감싸지만 밑에 불필요한 공간이 생김을 확인하였다. (이걸 없애려고 3시간 동안 별별짓을 다해 보았다..)

결론적으로 이것을 없애지 못하고 다른 방법을 찾게 되었다.

그것은 section의 display 속성을 block으로 주는 방법이다.

이렇게 되면 해당 section 콘텐츠는 반응형에 따라 마구 짤리게 되는데,

이것을 방지하려면 section에 page-break-inside: avoid; 속성을 추가해주면 된다.

(이 부분은 이미 글을 올려놓았기에 생략하겠습니다.)

이렇게해서 문제 없는 masonry를 구현할 수 있었다.

이 글이 비슷한 문제로 해메고 있는 누군가에게 도움이 되었으면 한다.

참고로 해당 영감는 아래의 링크의 질문을 보고 얻었다.

https://stackoverflow.com/questions/13851773/extra-space-at-the-bottom-of-css-columns