Grid 레이아웃

Grid 레이아웃 (CSS 변수)

Grid 레이아웃에서 사용하는 CSS 변수를 정리한 문서예요. 컬럼 span, 오프셋, 거터, 순서를 토큰으로 제어할 수 있어요.

출처: 문서

본문

CSS 변수 (CSS variables)

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

• --pf-t--global--spacer--gutter--default
• --pf-t--global--spacer--md
• --pf-t--global--spacer--300
• 1rem

모든 항목 컬럼 span (.pf-v6-l-grid.pf-m-all-{1-12}-col > *)

각 modifier에 대해 --pf-v6-l-grid__item--GridColumnEnd는 span {n}으로 설정됩니다:

개별 항목 컬럼 span (.pf-v6-l-grid > .pf-m-{1-12}-col)

각 modifier에 대해 --pf-v6-l-grid__item--GridColumnEnd는 span {n}으로 설정됩니다:

오프셋 (.pf-v6-l-grid > .pf-m-offset-{1-12}-col)

각 modifier에 대해 --pf-v6-l-grid__item--GridColumnStart는 col-start calc({n} + 1)으로 설정됩니다:

더 알아보기 (Learn more)