❗Masonry❗

개념

레이아웃은 요소들이 정렬되어 있지만, 각 요소의 크기가 다를 때 발생하는 비정형 그리드 레이아웃을 말한다. 주로 이미지나 카드 같은 다양한 크기의 콘텐츠를 시각적으로 매력적으로 배치하는 데 사용된다. 이 레이아웃은 빈 공간을 최소화하면서 요소를 겹치지 않게 배치하는 특징이 있다.

핀터레스트와 같은 사이트들이 사용하는 방법인듯함

특징

1. 비정형 그리드: 요소의 높이나 너비가 다르기 때문에 격자 모양이 일정하지 않고, 시각적으로 역동적이다.

2. 유동성: 브라우저의 크기에 따라 요소들이 자동으로 재배치되므로, 반응형 디자인에 적합하다.

3. 공간 활용: 빈 공간을 최소화하여 콘텐츠의 가독성을 높인다.

사용예제

-html-
<div class="masonry-grid">
  <div class="item" style="height: 100px;">1</div>
  <div class="item" style="height: 200px;">2</div>
  <div class="item" style="height: 150px;">3</div>
  <div class="item" style="height: 250px;">4</div>
</div>

-css-
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px; /* 요소 간의 간격 */
}

.item {
  background: #ccc;
  border: 1px solid #999;
}

결과값!