[CSS] masonry layout 구현하기

Masonry layout 이란?

• 요소의 크기에 따라 최적의 배치시켜준다.
• 대표적으로 핀터레스트에서 사용하는 레이아웃이다.

사용될 속성

1. column-count
2. column-gap

column-count

• 해당 요소를 몇 개의 column으로 나눌지 설정할 수 있다.

column-count: 개수

column-gap

• column 사이의 간격을 설정할 수 있다.

column-gap: 사이즈

프로젝트 코드

<S.PinItem>
   <S.PinImg/>
</S.PinItem>

export const RelatedPin = styled.h3`
  margin: 18px auto;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
`;

export const ImgWrapper = styled.div`
  margin: 0 auto;
  max-width: 1440px;
  column-count: 4;
  column-gap: 1em;
`;

export const PinItem = styled.article`
  display: inline-flex;
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 24px;
  overflow: hidden;
`;

export const PinImg = styled.img`
  width: 100%;
  height: auto;
  object-fit: cover;
`;