그리드

자식을 행·열 격자로 배치하는 CSS grid 레이아웃이다. 균등 다열·반응형·카드 갤러리·다열 폼에 쓴다. 린 버전이라 columns(균등 N열, 반응형 가능)·gap·align 만 토큰으로 다루고, 개별 셀 스팬은 자식의 col-span-N 으로, 그 밖의 정밀 제어는 className 으로 덧입힌다. 단순 선형 배치는 스택, 패딩·배경은 박스와 조합한다.

활용 방법

균등 열 (columns)

columns 에 숫자(1·2·3·4·6·12)를 주면 균등 N열 격자가 된다.

Preview

tsx

<Grid columns={3} gap="sm">
  <Cell>1</Cell> ... <Cell>6</Cell>
</Grid>

반응형 (columns 객체)

columns 를 { base, sm, md, lg } 로 주면 화면 폭에 따라 열 수가 바뀐다. 창을 줄였다 늘려보자(카드 갤러리 패턴).

Preview

카드 A

카드 B

카드 C

tsx

<Grid columns={{ base: 1, sm: 2, lg: 3 }} gap="base">
  <Card /> <Card /> <Card />
</Grid>

셀 스팬 (col-span)

개별 셀은 자식 className="col-span-N" 으로 여러 열을 차지한다. 전체폭 헤더 + 균등 셀.

Preview

전체폭 (col-span-3)

1/3

tsx

<Grid columns={3} gap="sm">
  <Box className="col-span-3">전체폭 헤더</Box>
  <Cell/> <Cell/> <Cell/>
</Grid>

다열 폼

절반폭 필드 + 전체폭 필드를 섞는 폼. 입력은 자식으로, 전체폭은 col-span 으로.

Preview

tsx

<Grid columns={2} gap="base">
  <Input placeholder="이름" />
  <Input type="email" placeholder="이메일" />
  <Input placeholder="메모" className="col-span-2 w-full" />
</Grid>

스택 · 박스와 역할

· 그리드: 행·열 격자(다열·반응형·스팬). 2차원 배치.
· 스택: 한 축 선형 배치. 대부분의 줄 세우기는 스택으로 충분.
· 박스: 용기(패딩·배경·테두리). 그리드 셀 안에 겹쳐 쓴다.

속성

이름	타입	기본값	설명
columns	1 \| 2 \| 3 \| 4 \| 6 \| 12 \| { base?, sm?, md?, lg? }	1	균등 N열. 객체면 반응형
gap	"none" \| "xs" \| "sm" \| "base" \| "lg" \| "xl"	"base"	셀 사이 간격(4·8·12·16·24px)
align	"start" \| "center" \| "end" \| "stretch"	-	교차축 정렬(미지정 시 stretch)
as	ElementType	"div"	시맨틱 요소
className	string	-	롱테일: 셀 스팬(자식 col-span-N)·정밀 제어 등
...props	HTMLAttributes	-	id·role·aria-* 등 전달