Masonry Grid

보통

높이가 다른 아이템들을 벽돌처럼 쌓는 그리드 레이아웃

#grid#layout#css

라이브 데모

#1
#2
#3
#4
#5
#6

코드

MasonryGrid.tsx
export const MasonryGrid = () => {
  const items = [
    { id: 1, height: 200, color: '#FF6B6B' },
    { id: 2, height: 150, color: '#4ECDC4' },
    // ...
  ];

  return (
    <div className="masonry-grid">
      {items.map((item) => (
        <div
          key={item.id}
          className="masonry-item"
          style={{ height: `${item.height}px`, backgroundColor: item.color }}
        >
          #{item.id}
        </div>
      ))}
    </div>
  );
};
layouts.css
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 10px;
  gap: 12px;
}

.masonry-item:nth-child(1) {
  grid-row-end: span 20;
}