메이슨리 격자
높이가 다른 카드를 다단으로 쌓아요. CSS 다단이라 카드가 잘리지 않아요.
모바일PCMasonryGrid
고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 높이가 다른 카드를 벽돌처럼 쌓을 때.
인터페이스#
타입에서 자동으로 뽑은 표예요.
MasonryGrid#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| items* | - | MasonryItem[] | |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
| single | - | boolean | `sm:columns-2`는 **창** 폭(640px)을 보므로 1440px 창에 뜬 358px 도크 안에서도 2열이 됐다. |
| anchorTop | - | string | 앵커 점프가 남기는 위 여백 - 기본 9rem(페이지: 헤더+탭바+서브내비). 도크는 서브내비뿐이라 더 작다. |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
접근성#
- 읽는 순서는 위에서 아래, 단마다예요(CSS 다단).
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |