# Grid
URL: /react/components/layout/grid
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/components/(foundation)/layout/grid.mdx
Grid 컴포넌트는 CSS Grid를 사용하며 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.
## Preview
```tsx
import { Flex, Grid } from "@seed-design/react";
export default function GridPreview() {
return (
{Array.from({ length: 6 }).map((_, index) => (
{index + 1}
))}
);
}
```
## Props
### `Grid`
### `GridItem`
`GridItem`은 Grid 컨테이너 내에서 아이템의 배치를 제어하는 컴포넌트입니다. Grid 내부의 모든 아이템이 `GridItem`일 필요는 없습니다.
## Columns and Rows
``의 `columns` 또는 `rows` prop에 number를 지정하여 `grid-template-columns` 또는 `grid-template-rows`를 `repeat(${columns|rows}, minmax(0, 1fr))`로 설정할 수 있습니다.
```tsx
import { Divider, Flex, Grid, HStack } from "@seed-design/react";
export default function GridNumber() {
return (
{[1, 2, 3, 4, 5].map((n) => (
{n}
))}
{[1, 2, 3, 4, 5].map((n) => (
{n}
))}
);
}
```
``의 `columns` 또는 `rows`에 `grid-template-columns` 또는 `grid-template-rows` 값을 직접 지정할 수도 있습니다.
```tsx
import { Divider, Flex, Grid, HStack } from "@seed-design/react";
export default function GridString() {
return (
{[1, 2, 3, 4, 5].map((n) => (
{n}
))}
{[1, 2, 3, 4, 5].map((n) => (
{n}
))}
);
}
```
## Spanning Items
``을 활용하여 그리드 아이템이 여러 열이나 행을 차지하도록 할 수 있습니다.
- `colSpan` 또는 `colStart`, `colEnd` prop으로 열 span을 지정합니다. `colSpan="full"`을 전달하면 행 전체 (좌우 양 끝)을 차지합니다.
- `rowSpan` 또는 `rowStart`, `rowEnd` prop으로 행 span을 지정합니다. `rowSpan="full"`을 전달하면 열 전체 (상하 양 끝)을 차지합니다.
```tsx
import { Divider, Grid, GridItem, HStack } from "@seed-design/react";
export default function Spanning() {
return (
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
);
}
```
## Auto Flow
``의 `autoFlow` prop을 사용하여 아이템이 배치되는 방향을 지정할 수 있습니다.
```tsx
import { useState } from "react";
import { Grid, type GridProps, GridItem, VStack } from "@seed-design/react";
import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";
type AutoFlow = NonNullable;
export default function AutoFlow() {
const [autoFlow, setAutoFlow] = useState("row");
const isColumn = autoFlow.startsWith("column");
const color = isColumn ? "green" : "purple";
const gridProps = isColumn ? { rows: 3 } : { columns: 3 };
const spanProps = isColumn ? { rowSpan: 2 } : { colSpan: 2 };
return (
{[1, 2].map((n) => (
{n}
))}
{[3, 4, 5].map((n) => (
{n}
))}
setAutoFlow(value as AutoFlow)}
aria-label="Auto Flow"
>
row
row dense
column
column dense
);
}
```
## Auto Rows / Columns
``의 `autoRows` 또는 `autoColumns` prop을 사용하여 암시적으로 생성되는 행이나 열의 크기를 지정할 수 있습니다. 동적으로 아이템이 추가되는 그리드에서 유용합니다.
```tsx
import { Divider, Flex, Grid, HStack } from "@seed-design/react";
export default function AutoRowsColumns() {
return (
{[1, 2, 3, 4, 5].map((n) => (
{n === 2
? "Ea anim non aute minim ea deserunt enim Elit deserunt laborum et quis sit."
: n}
))}
{[1, 2, 3, 4, 5].map((n) => (
{n === 2
? "Ea anim non aute minim ea deserunt enim Elit deserunt laborum et quis sit."
: n}
))}
);
}
```
## Using `asChild` Prop
`GridItem`은 `asChild` prop을 사용하여 자식 요소에 직접 grid 속성을 적용할 수 있습니다.
`asChild` prop에 대해 자세히 알아봅니다.
```tsx
Link spanning 2 columns
```
## Using Box for Grid Item Placement
`GridItem`은 내부적으로 `colSpan`, `colStart`, `colEnd`, `rowSpan`, `rowStart`, `rowEnd` prop을 `gridColumn` 및 `gridRow` 스타일로 변환하여 `Box`에 적용합니다.
따라서 `Box` 컴포넌트에서 `gridColumn`, `gridRow` prop을 직접 사용할 수도 있습니다.
```tsx
colSpan=2
colSpan=full
colStart=2 colEnd=4
```
## Responsive Design
Grid의 `columns`, `rows`, `gap` 등에 반응형 값을 전달하여 viewport 크기에 따라 레이아웃을 조정할 수 있습니다.