Gallery 레이아웃

Gallery 레이아웃에서 사용하는 CSS 변수를 정리한 문서예요. 거터와 그리드 템플릿 컬럼의 min/max 폭을 토큰으로 제어할 수 있어요.

출처: 문서

본문

CSS 변수 (CSS variables)

Selector Variable Value
.pf-v6-l-gallery --pf-v6-l-gallery--m-gutter--GridGap 1rem
.pf-v6-l-gallery --pf-v6-l-gallery--GridTemplateColumns--min 250px
.pf-v6-l-gallery --pf-v6-l-gallery--GridTemplateColumns--minmax--min 250px
.pf-v6-l-gallery --pf-v6-l-gallery--GridTemplateColumns--max 1fr
.pf-v6-l-gallery --pf-v6-l-gallery--GridTemplateColumns--minmax--max 1fr
.pf-v6-l-gallery --pf-v6-l-gallery--GridTemplateColumns repeat(auto-fill, minmax(250px, 1fr))
.pf-v6-l-gallery --pf-v6-l-gallery--GridTemplateRows auto

거터 값은 전역 토큰으로 구성됩니다:

  • --pf-v6-l-gallery--m-gutter--GridGap
  • --pf-t--global--spacer--gutter--default
  • --pf-t--global--spacer--md
  • --pf-t--global--spacer--300
  • 1rem

min/max 값의 구성 체인:

  • --pf-v6-l-gallery--GridTemplateColumns--minmax--min ← --pf-v6-l-gallery--GridTemplateColumns--min ← 250px
  • --pf-v6-l-gallery--GridTemplateColumns--minmax--max ← --pf-v6-l-gallery--GridTemplateColumns--max ← 1fr
  • --pf-v6-l-gallery--GridTemplateColumns ← repeat(auto-fill, minmax(--pf-v6-l-gallery--GridTemplateColumns--minmax--min, --pf-v6-l-gallery--GridTemplateColumns--minmax--max)) ← repeat(auto-fill, minmax(--pf-v6-l-gallery--GridTemplateColumns--min, --pf-v6-l-gallery--GridTemplateColumns--max)) ← repeat(auto-fill, minmax(250px, 1fr))

더 알아보기 (Learn more)