Masonry의 사전적 의미는 벽돌을 쌓아올린다는 뜻으로, 웹에서의 Masonry 레이아웃은 하나의 축(대부분 열)이 일반적인 그리드 레이아웃을 사용하고 다른 한 축이 Masonry 레이아웃을 사용하는 레이아웃 방법입니다. 다시 말해 Masonry 레이아웃을 사용하는 축의 방향으로는 요소를 빈틈 없이 차곡차곡 쌓는 형태의 UI를 가리킨다

export const Container = styled.div`
  gap: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
`;

<Styled.Container ref={manRef}>
        {cards.map((data: any, idx) => (
          <Styled.Card key={data.description + idx}>
            <Styled.Content>
              <Styled.Title>{data.name + idx}</Styled.Title>
              {data.description}
            </Styled.Content>
          </Styled.Card>
        ))}
</Styled.Container>


function masonryLayout() {
    const masonryItems = manRef.current?.childNodes;
    masonryItems?.forEach(item => {
      const element = item as HTMLElement;
      const innerElement = element.children[0];
      const innerElementHeight = innerElement.getBoundingClientRect().height;

      element.style.gridRowEnd = `span ${Math.ceil((innerElementHeight + 10) / 50)}`;
    });
  }

Untitled