Grid

CSS Grid 레이아웃을 구성하는 컴포넌트

개요

Col Span 2
Col Start 4 End 6
Col Span 5

설치

사용법

Grid와 GridItem을 import하여 사용합니다.

예제

Template Columns

templateColumns로 그리드 컬럼 템플릿을 정의합니다.

Spanning Columns

colSpan, rowSpan으로 여러 셀에 걸친 아이템을 만들 수 있습니다.

Row Span 2
Col Span 2
Col Span 2
Col Span 4

접근성

WCAG 2.1 / KWCAG 2.2 AA 기준을 준수합니다.

  • 시맨틱 마크업: Grid는 의미론적으로 중립적인 <div> 요소를 사용합니다. 필요시 적절한 시맨틱 태그나 ARIA 역할을 추가하세요
  • 키보드 네비게이션: Grid 내부 요소들의 Tab 순서가 시각적 배치와 일치하도록 구성
  • 반응형 레이아웃: 다양한 화면 크기에서 그리드가 적절히 재배치되어 모든 사용자가 콘텐츠에 접근 가능
  • 복잡한 레이아웃: 복잡한 그리드 구조의 경우 논리적인 읽기 순서를 유지하도록 주의