Masonry

일정하지 않은 크기의 요소들을 빈틈없이 나열하는 레이아웃입니다.

Example

It can only be viewed in a mobile.

Steps

Add type

types/index.d.ts

interface Props {
  children?: ReactNode
}

Copy Code

containers/Masonry/index.tsx

export interface Props extends ReactProps {}
 
function Masonry({ children }: Props) {
  return (
    <ul className="columns-1 sm:columns-2 md:columns-3 lg:columns-4 [&>li]:mb-4 [&>li]:break-inside-avoid">
      {children}
    </ul>
  )
}
 
export default Masonry

Usage

<Masonry>
  {Array.from({ length: 12 }).map((_, key) => (
    <li key={key}>
      <img
        src={`https://picsum.photos/200/${Math.ceil(Math.random() * 5) * 100}`}
        alt=""
      />
    </li>
  ))}
</Masonry>

Props

Name	Type	Default
children	ReactNode

Input Modal