Grid
간격 토큰으로 쌓고 4·8·12열 격자로 배치.
- 출시 화면에서 사용
개요
미리보기
Area 1
Area 2
Area 3
Area 4
Area 5
Area 6
예시
상태
자동
Area 1Area 2Area 3Area 4Area 5Area 6최대 4열
Area 1Area 2Area 3Area 4최대 12열
Area 1Area 2Area 3Area 4Area 5Area 6Area 7Area 8Area 9Area 10Area 11Area 12
쓰임 예
2열
Area 1Area 2Area 3Area 43열
Area 1Area 2Area 3Area 4
이렇게 · 이렇게 하지 않기
- 이렇게 간격은 토큰 값만 쓴다. 읽는 순서와 초점 순서가 시각 순서와 같아야 하므로 CSS order로 순서를 바꾸지 않는다. 320px에서 가로 넘침이 없어야 한다.
- 이렇게 열 수는 상한으로 생각한다. 좁은 화면에서 줄어드는 것이 정상이다.
- 이렇게 하지 않기 DOM 순서 = 시각 순서. order, row-reverse, dense 배치로 순서를 바꾸지 않는다(초점 순서가 어긋난다).
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
columns? | 0 | 2 | 3 | 4 | 6 | 12 | 0 | 0 = 자동(최소 폭(144px) 칸을 들어가는 만큼). 숫자 = 최대 열 수. 좁아지면 열을 줄여 320px에서도 가로 스크롤이 없다. |
gap? | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | lg | 간격 토큰 단계: none 0 · xs 4 · sm 8 · md 12 · lg 16 · xl 24 · 2xl 32px. 임의 숫자는 받지 않는다. |
as? | 'div' | 'ul' | 'ol' | div | 목록이면 ul/ol(role="list" 명시). |
children? | ReactNode | — | 칸. 미리보기는 표본 칸. |
| 그 밖의 속성 | — | — | id, aria-* 등 네이티브 속성은 그대로 전달된다. className·style은 받지 않는다. |
접근성
키보드: 해당 없음(배치만).
- DOM 순서 = 시각 순서. order, row-reverse, dense 배치로 순서를 바꾸지 않는다(초점 순서가 어긋난다).
- 열이 줄어도 칸 순서는 그대로라 400% 확대에서 읽는 순서가 유지된다.