masonry 구현시 유의할 점

본 포스트를 올리게 된 이유는 이전에 masonry를 구현해 놓은것에 대한 문제점을 발견하였고,

그것을 해결하였기 때문이다.

두가지 문제가 있었는데, 하나는 반응형 컬럼 구현이었다.

창의 width값이 변함에 따라서 컬럼의 수가 동적으로 달라졌는데,

이떄문에 창의 width값에 따라 원하는 컬럼의 수를 맞춰주기 위해

컬럼안의 객체의 너비를 column-width 속성으로 일일이 설정해줘야 했다.

해결 방법을 찾아보니 column-count 이라는 속성을 이용하면 쉽게 해결할 수 있었다.

본 속성은 창이 width 값이 달라져도 컬럼의 개수를 일정하게 유지시켜주는 속성이다.

다음 문제로는 컨텐츠가 세로로 짤려서 다음 컬럼으로 가는 문제였는데,

본 문제는 컬럼안에 있는 각 객체에 break-inside: avoid 속성만 부여해주면 되었다.

하지만 firefox에서는 본 속성이 먹히지 않았는데,

찾아보니 firefox에서는 page-break-inside: avoid 속성만을 인식하고 있었다.

하지만 적용해도 firefox에서는 여전히 콘텐츠가 짤려있길래

더 찾아보았더니 문제의 원인을 찾아낼 수 있었다.

바로 컬럼안 객체의 display 속성이 block이 아닌 inline-block이 되어야 컨텐츠가 짤리지 않고 적용된다.

아래는 해당 문제에 대해 참조한 링크이다.

https://stackoverflow.com/questions/26854095/stop-css3-columns-breaking-paragraphs-up