Gallery 레이아웃

Gallery 레이아웃은 콘텐츠를 반응형 그리드에 배치해 주는 레이아웃이에요. 모든 자식이 균일한 크기로 가로로 표시되고 반응형으로 줄바꿈돼요.

출처: 문서

본문

예시 (Examples)

기본 (Basic)

  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item

거터 포함 (With gutters)

  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item

최소 너비 조정 (Adjusting min widths)

  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item

최대 너비 조정 (Adjusting max widths)

  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item

최소·최대 너비 조정 (Adjusting min and max widths)

  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item

대체 컴포넌트 (Alternative components)

  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item
  • Gallery Item

Props

GalleryItem

Name Type Default Description
children React.ReactNode null Gallery Item 안에 렌더링되는 콘텐츠
component React.ElementType<any> | React.ComponentType<any> 'div' 렌더링할 기본 컴포넌트를 설정합니다. 기본값은 div

더 알아보기 (Learn more)