# PisellLayouts 命名空间

布局组件集合

## 使用方式

```tsx
import { PisellLayouts } from '@pisell/materials';

// 网格布局
<PisellLayouts.BasicGrid columns={3} gap={16}>
  {items.map(item => <Card key={item.id} {...item} />)}
</PisellLayouts.BasicGrid>

// 滚动视图
<PisellLayouts.ScrollView direction="horizontal">
  <Content />
</PisellLayouts.ScrollView>

// 页面布局
<PisellLayouts.Layout>
  <PisellLayouts.Header>头部</PisellLayouts.Header>
  <PisellLayouts.Content>内容</PisellLayouts.Content>
  <PisellLayouts.Footer>底部</PisellLayouts.Footer>
</PisellLayouts.Layout>
```

## 包含组件

- `BasicGrid` - 基础网格布局
- `ScrollView` - 滚动视图
- `Layout` - 页面布局
- `Header` - 页面头部
- `Content` - 页面内容
- `Footer` - 页面底部
- `Sider` - 侧边栏
- `Container` - 容器
- `Row` - 行容器
- `ViewGrid` - 视图网格

## 向后兼容

所有组件仍可单独导入：

```tsx
import { PisellBasicGrid, PisellScrollView } from '@pisell/materials';

<PisellBasicGrid columns={3}>{children}</PisellBasicGrid>
```
