# Columns
URL: /react/components/columns
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/components/(deprecated)/columns.mdx

여러 열로 구성된 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.

<Callout type="warn">
  더 이상 사용되지 않습니다. [`HStack`](/react/components/layout/h-stack)과 `wrap` prop을 사용하세요.
</Callout>

## Preview

```tsx
import { Column, Columns } from "@seed-design/react";

/**
 * @deprecated use `HStack` instead.
 */
export default function ColumnsPreview() {
  return (
    <Columns bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
      <Column bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
        1
      </Column>
      <Column bg="bg.brandSolid" px="x4" py="x3" width="content" borderRadius="r2">
        Content Width
      </Column>
      <Column bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
        2
      </Column>
    </Columns>
  );
}
```

## Usage

```tsx
import { Columns, Column } from "@seed-design/react";
```

```tsx
<Columns />
```

## Props

### `Columns`

### `Column`