SimpleGrid
자동으로 반응형 그리드 레이아웃을 생성하는 간단한 그리드 컴포넌트입니다.
개요
SimpleGrid는 CSS Grid를 기반으로 반응형 레이아웃을 쉽게 만들 수 있는 유틸리티 컴포넌트입니다. columns로 고정 열 개수를 설정하거나 minChildWidth로 자동 반응형 그리드를 구현할 수 있습니다.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
설치
사용법
예제
고정된 열 개수
columns prop으로 그리드의 열 개수를 지정합니다. (1-12)
1
2
3
4
5
6
7
8
자동 반응형 (minChildWidth)
minChildWidth로 각 아이템의 최소 너비를 지정하면, 컨테이너 크기에 따라 자동으로 열 개수가 조정됩니다.
Auto Item 1
최소 200px 너비
Auto Item 2
최소 200px 너비
Auto Item 3
최소 200px 너비
Auto Item 4
최소 200px 너비
Auto Item 5
최소 200px 너비
Auto Item 6
최소 200px 너비
간격 (Gap)
gap prop으로 그리드 아이템 간 간격을 조절합니다.
작은 간격 (sm - 16px)
1
2
3
4
5
6
중간 간격 (md - 24px, 기본값)
1
2
3
4
5
6
큰 간격 (lg - 32px)
1
2
3
4
5
6
제품 카드 그리드
제품 목록을 그리드 레이아웃으로 표시하는 예시입니다.
제품 A
29,000원
제품 B
39,000원
제품 C
49,000원
제품 D
59,000원
대시보드 위젯
통계 대시보드를 그리드로 구성하는 예시입니다.
총 방문자
1,234
+12.5%
신규 가입
89
+8.3%
매출
456만원
-3.2%
사용 가이드
언제 사용하나요?
SimpleGrid를 사용하기 적합한 경우
- 카드 그리드를 만들 때
- 균등한 너비의 아이템을 정렬할 때
- 대시보드 레이아웃을 구성할 때
- 갤러리나 제품 목록을 표시할 때
- 반응형 그리드가 필요할 때
언제 사용하지 말아야 하나요?
SimpleGrid 사용을 피해야 하는 경우
- 아이템들이 자동 줄바꿈되어야 할 때 (
Wrap사용) - 수직/수평 스택 레이아웃이 필요할 때 (
Stack사용) - 복잡한 그리드 레이아웃이 필요할 때 (CSS Grid 직접 사용)
- 각 아이템의 크기가 불규칙할 때 (다른 레이아웃 방식 고려)
접근성
SimpleGrid는 WCAG 2.1 / KWCAG 2.2 기준을 준수합니다.
- 시맨틱 마크업: 의미론적으로 중립적인
<div>요소를 사용합니다. 필요시 적절한 ARIA 역할을 추가하세요. - 반응형 레이아웃: minChildWidth를 사용하면 다양한 화면 크기에서 자동으로 최적화된 레이아웃을 제공합니다.
- 키보드 네비게이션: 그리드 내 요소들의 Tab 순서가 자연스럽게 유지됩니다.