Masonry

Prerequisite

주의

아직 tailwindcss에는 자식 선택자에 대한 기능이 없기 때문에, 직접 css로 컴포넌트를 만드는 방법이 필요합니다.

tailwind css file

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .masonry {
    @apply break-inside-avoid gap-2 inline-block columns-2 sm:columns-3 md:columns-4 lg:columns-4 xl:columns-6 2xl:columns-7;
  }
  .masonry > * {
    @apply w-full mb-2;
  }
}

Code

components/Masonry/index.tsx

import type { FC } from 'react'

const Masonry = ({ children }) => {
  return <div class="masonry">{children}</div>
}

export default Masonry

Example