Grid
그리드 레이아웃 시스템 컴포넌트입니다.
개요
Grid는 CSS Grid를 활용한 반응형 그리드 레이아웃 컴포넌트입니다. 유연한 칼럼 시스템과 간격 조절을 제공합니다.
주요 특징:
- 반응형 그리드
- Gap 옵션
- Auto-fit / Auto-fill
- 다양한 칼럼 옵션
사용 사례:
- 제품 그리드
- 이미지 갤러리
- 대시보드 레이아웃
- 카드 그리드
알림: 이 컴포넌트는 현재 구현 중입니다. 임시로 Tailwind CSS Grid를 사용할 수 있습니다.
기본 사용법
<div className="grid grid-cols-3 gap-md">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>Variants (변형)
반응형 그리드
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-md">
{items.map((item) => (
<Card key={item.id}>{item.content}</Card>
))}
</div>Auto-fit
<div className="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-md">
<Card>Card 1</Card>
<Card>Card 2</Card>
<Card>Card 3</Card>
</div>예제
예제 1: 제품 그리드
export default function ProductGrid() {
return (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-lg">
{products.map((product) => (
<Card key={product.id}>
<img src={product.image} alt={product.name} />
<h3>{product.name}</h3>
<p>{product.price}</p>
</Card>
))}
</div>
);
}관련 컴포넌트
Last updated on