[CSS] column-count를 이용하여 masonry layout 구현하기

Masonry Layout

핀터레스트 홈페이지 화면

masonry는 석조라는 단어라고 합니다. 즉 벽돌을 적조하는 것에서 착안한 레이아웃이라고 합니다.

대표적으로는 핀터레스트가 있죠.

보통 이미지를 나열해서 보여줄 때 유용한 레이아웃이며, 특징은 각 이미지의 너비가 동일하다는 것입니다.

column-count

위와 같은 레이아웃은 column-count 속성으로 간편하게 구현할 수 있습니다.

<section class="masonry-container">
  <article class="masonry-item">
    <img class="masonry-item-img" />
  </article>
  <article class="masonry-item">
    <img class="masonry-item-img" />
  </article>
  <article class="masonry-item">
    <img class="masonry-item-img" />
  </article>
  ...
</section>

.masonry-container {
  column-count: 4;
  column-gap: 1em;
}

.masonry-item {
  display: inline-flex;
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 10px;
  overflow: hidden;
  
  &:hover: {
    transform: scale(1.2);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
  }
}

.masonry-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

마손리 컨테이너에 column-count 속성을 주고, 마손리 컨테이너 자식 요소에는 width: 100% 속성을 줍니다.

그리고 마손리 아이템의 자식인 img 태그에는 width 및 height, object-fit 속성을 줍니다.

height 속성을 안줘도 크롬에서는 잘 동작하지만, 사파리에서는 레이아웃이 깨질 수 있으니, 크로스 브라우징을 고려하신다면 height 속성을 주시는 것이 좋습니다.

 

masonry layout을 적용한 모습

스샷 같은 경우엔, 모든 이미지가 정방형이여서 grid layout 처럼 보이지만, 가로세로 비율이 1:1이 아닌 이미지에 대해서는 핀터레스트와 같은 레이아웃이 됩니다.

 

overflow 문제

column-count 속성을 이용해 구현한 레이아웃에는 단점이 있습니다.

 

부모 영역을 벗어날 경우 잘려버린다. (움짤이므로 눌러서 보세요.)

바로 컨테이너 영역을 벗어나면, 얄짤없이 잘려버린다는 점이죠. 마치 overflow: hidden 속성이 적용된 것 처럼 말이죠.

해당 이슈를 해결하기 위해서는, 컨테이너 요소에 will-change 속성을 주면 됩니다.

저같은 경우엔 transform: scale() 속성을 사용했기 때문에, 다음과 같이 수정했습니다.

 

.masonry-item {
  display: inline-flex;
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 10px;
  overflow: hidden;
  will-change: transform; /* 해당 속성을 추가 */
  
  &:hover {
    transform: scale(1.2);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
  }
}

 

잘림 현상은 사라졌다. (움짤이므로 눌러서 보세요.)

그러면 아까와 같은 잘림 현상은 방지할 수 있습니다.

 

z-index 이슈

위 움짤들을 보시면 z-index에 뭔가 문제가 있다는 것을 알 수 있을 겁니다.

저도 이 부분에 대해서 정확한 원인은 찾지 못했지만, 아무래도 각 아이템의 나열 순서대로 z-index가 설정되는게 아닌가 싶습니다.

따라서 좌상단 아이템일수록 z-index가 낮고, 우하단 아이템일수록 z-index가 높아서, scale 했을 때 오른쪽 및 아래쪽 요소에 가려버리는 현상이 발생하는 거죠.

다만 이 현상은 scale 값과 column-gap, margin 값을 적절히 조절하면 신경쓰지 않아도 되는 문제이긴 합니다만.. 그래도 원인을 파악하고 해결하는 게 좋긴 합니다.