Gallery 레이아웃

Gallery 레이아웃의 HTML 문서예요. 균일한 크기의 자식을 반응형으로 줄바꿈하며 가로로 배치해 줘요.

출처: 문서

본문

예시 (Examples)

기본 (Basic)

  • content
  • content
  • content
  • content
  • content

거터 포함 (With gutter)

  • content
  • content
  • content
  • content
  • content

Grid 템플릿 minmax() 너비 커스터마이즈

Grid template columns의 최소값은 .pf-v6-l-gallery에 적용할 수 있어요. 최소 너비는 인라인으로 --pf-v6-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}처럼 설정합니다.

최소 너비 수정 갤러리

  • content
  • content
  • content
  • content
  • content

최대 너비 수정 갤러리

  • content
  • content
  • content
  • content
  • content

최소 너비 수정 갤러리, 반응형 업데이트

  • content
  • content
  • content
  • content
  • content

최대 너비 수정 갤러리, 반응형 업데이트

  • content
  • content
  • content
  • content
  • content

최소·최대 너비 수정 갤러리, 반응형 업데이트

  • content
  • content
  • content
  • content
  • content

리스트 타입 (List type)

  • content
  • content
  • content
  • content
  • content

문서 (Documentation)

개요 (Overview)

Gallery 레이아웃은 모든 자식이 균일한 크기를 가지며 가로로 표시되고 반응형으로 줄바꿈되도록 설계되었어요.

사용 (Usage)

Class Applied to Outcome
.pf-v6-l-gallery <div> Gallery 레이아웃을 초기화합니다.
.pf-v6-l-gallery__item <div> 갤러리의 자식을 명시적으로 설정합니다. 이 클래스는 필수는 아니지만, BEM 규약에 맞추고 나중에 modifier를 적용할 엔티티를 제공하기 위해 포함합니다.
.pf-m-gutter .pf-v6-l-gallery 전역으로 정의된 거터 값을 사용해 자식 사이에 공간을 추가합니다.
--pf-v6-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width} .pf-v6-l-gallery 선택적 breakpoint에서 grid-template-columns 선언의 min 값을 수정합니다.
--pf-v6-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width} .pf-v6-l-gallery 선택적 breakpoint에서 grid-template-columns 선언의 max 값을 수정합니다.

더 알아보기 (Learn more)