# Layout
URL: /react/blocks/layout
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/blocks/layout.mdx

페이지의 콘텐츠 영역을 반응형으로 제한하고 중앙 정렬하는 페이지 레이아웃 블록입니다.

## Usage

```tsx
import { Layout } from "@seed-design/react";
```

```tsx
<Layout.Root>
  <Layout.Content>{/* 콘텐츠 */}</Layout.Content>
</Layout.Root>
```

## Props

### `Layout.Root`

### `Layout.Content`

## Density

`density` prop으로 콘텐츠 영역의 최대 너비를 조절합니다.

## Blocks

- npm: npx @seed-design/cli@latest add block:layout-01
- pnpm: pnpm dlx @seed-design/cli@latest add block:layout-01
- yarn: yarn dlx @seed-design/cli@latest add block:layout-01
- bun: bun x @seed-design/cli@latest add block:layout-01

* npm: npx @seed-design/cli@latest add block:layout-02
* pnpm: pnpm dlx @seed-design/cli@latest add block:layout-02
* yarn: yarn dlx @seed-design/cli@latest add block:layout-02
* bun: bun x @seed-design/cli@latest add block:layout-02