Skip to content
Docs
컴포넌트로 돌아가기

Grid

@hua-labs/ui
v1.1.0

반응형 열과 간격을 설정할 수 있는 CSS 그리드 레이아웃 컴포넌트입니다.

설치

bash
npm install @hua-labs/hua
Import
tsx
import { Grid } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 그리드

아이템 1
아이템 2
아이템 3
아이템 4
아이템 5
아이템 6

열 개수

cols=2
1
2
3
4
cols=3
1
2
3
4
5
6
cols=4
1
2
3
4
5
6
7
8

간격 크기

gap="sm"
1
2
3
4
gap="md"
1
2
3
4
gap="lg"
1
2
3
4

반응형 그리드

기본적으로 반응형이 활성화됩니다. 창 크기를 조절해보세요.

아이템 1
아이템 2
아이템 3
아이템 4
아이템 5
아이템 6
아이템 7
아이템 8

Props

이름타입기본값설명
cols1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 121그리드 열 개수
gap"none" | "sm" | "md" | "lg" | "xl""md"그리드 아이템 간 간격
gapX"none" | "sm" | "md" | "lg" | "xl"-Horizontal gap between items
gapY"none" | "sm" | "md" | "lg" | "xl"-Vertical gap between items
responsivebooleantrue반응형 그리드 활성화 (모바일: 1열, 태블릿: 2열, 데스크톱: 지정값)

코드 예시

기본 사용법
import { Grid } from '@hua-labs/ui';

<Grid cols={3} gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>
Separate Gaps
// Separate horizontal/vertical gaps
<Grid cols={4} gapX="lg" gapY="sm">
  {items.map(item => <div key={item.id}>{item.content}</div>)}
</Grid>
Fixed Grid
// Fixed grid (disable responsive)
<Grid cols={6} responsive={false} gap="lg">
  <div>Fixed 6 columns</div>
</Grid>

접근성

  • •시맨틱 HTML: 시각적 레이아웃에 CSS Grid를 사용하면서 보조 기술을 위한 시맨틱 HTML 구조와 논리적 DOM 순서 유지
  • •키보드 탐색: 그리드 항목 내 인터랙티브 자식 요소는 시각적 그리드 흐름에 맞는 자연스러운 탭 순서를 따름
  • •반응형 리플로우: 좁은 화면에서 가독성 있는 단일 열 레이아웃을 유지하도록 열이 자동 조정됨