Grid 레이아웃

Grid 레이아웃 (HTML)

Grid 레이아웃의 HTML 문서예요. CSS Grid의 2차원 컬럼·행 시스템을 기반으로 반응형 span과 거터를 구현해요.

출처: 문서

본문

예시 (Examples)

스마트 (반응형)

item 1 ~ item 12

재정의 포함 스마트 (반응형)

item 1 ~ item 14

기본 (Base)

12 col
11 col
1 col
10 col
2 col
9 col
3 col
8 col
4 col
7 col
5 col

거터 (Gutter)

12 col
11 col
1 col
10 col
2 col
9 col
3 col

반응형 (Responsive)

1 / 6 / 11 col
11 / 6 / 1 col
2 / 6 / 10 col
10 / 6 / 2 col
3 / 6 / 9 col
9 / 6 / 3 col
4 / 6 / 8 col
8 / 6 / 4 col
5 / 6 / 7 col
7 / 6 / 5 col

중첩 (Nested)

12 col
10 col
6 col
6 col
4 col
8 col
2 col

오프셋 (Offsets)

11 col, offset 1
10 col, offset 2
9 col, offset 3
8 col, offset 4

행 span (Row spans)

8 col
4 col, 2 row
2 col, 3 row
2 col
4 col
2 col
2 col
2 col
4 col
2 col
4 col
4 col

리스트로 (As a list)

item 1
item 2
item 3
item 4

정렬 (Ordering)

정렬은 중첩된 .pf-v6-l-grid와 .pf-v6-l-grid__items에 적용할 수 있어요. 항목이 정렬되는 방식에 따라 간격을 관리해야 할 수도 있습니다. order는 셀 수 없이 많은 요소에 적용될 수 있기 때문에, order는 인라인으로 --pf-v6-l-grid--item--Order{-on-[breakpoint]}: {order}처럼 설정합니다.

정렬 예시 (Ordering example)

Item A
Item B
Item C

반응형 정렬 (Responsive ordering)

Item A
Item B
Item C

그룹 정렬 (Grouped ordering)

Set 1, Item A
Set 1, Item B
Set 1, Item C
Set 1, Item D
Set 2, Item A
Set 2, Item B
Set 2, Item C
Set 2, Item D

그룹·반응형 정렬 (Grouped, responsive ordering)

Set 1, Item A
Set 1, Item B
Set 1, Item C
Set 1, Item D
Set 2, Item A
Set 2, Item B
Set 2, Item C
Set 2, Item D

문서 (Documentation)

개요 (Overview)

Grid 레이아웃은 CSS Grid의 2차원적인 컬럼과 행 시스템을 기반으로 합니다. 이 레이아웃은 부모 요소와 그 자식 요소에 스타일을 적용해 반응형 컬럼·행 span과 거터를 구현합니다.

사용 (Usage)

Class	Applied to	Outcome
`.pf-v6-l-grid`	`<div>`	그리드 레이아웃을 초기화합니다.
`.pf-v6-l-grid__item`	`<div>`	그리드의 자식을 명시적으로 설정합니다. 이 클래스는 필수는 아니지만, BEM 규약에 맞추고 나중에 modifier를 적용할 엔티티를 제공하기 위해 포함합니다.
`.pf-m-gutter`	`.pf-v6-l-grid`	전역으로 정의된 거터 값을 사용해 자식 사이에 공간을 추가합니다.
`.pf-m-all-{1-12}-col{-on-[breakpoint]}`	`.pf-v6-l-grid`	선택적 breakpoint에서 그리드 컨테이너의 grid 항목 크기를 정의합니다.
`.pf-m-{1-12}-col{-on-[breakpoint]}`	`.pf-v6-l-grid__item`	선택적 breakpoint에서 grid 항목 크기를 정의합니다. 필수는 아니지만 강력히 권장됩니다. 사용하지 않으면 grid 항목은 기본적으로 12 col이 됩니다.
`.pf-m-{2-x}-row{-on-[breakpoint]}`	`.pf-v6-l-grid__item`	선택적 breakpoint에서 grid 항목의 행 span을 정의합니다. 행 span이 올바르게 동작하려면 현재 행의 값과 span할 grid 항목의 합이 12보다 같거나 작아야 합니다. 예: `.pf-m-8-col.pf-m-2-row` + `.pf-m-4-col` + `.pf-m-4-col`. span할 행 수에는 제한이 없습니다.
`--pf-v6-l-grid--item--Order{-on-[breakpoint]}: {order}`	`.pf-v6-l-grid > .pf-v6-l-grid, .pf-v6-l-grid__item`	선택적 breakpoint에서 그리드 레이아웃 요소의 순서를 수정합니다.