---
title: Grid-栅栏
sidebarDepth: 2
---
# 栅格布局

## 使用方法
本组件将所有div分成24等份，可以通过指定span控制div的宽度，可以通过控制offset调整div之间的偏移量,通过align进行对齐。

### 将一行分成n个div
<ClientOnly><grid-demo-1> </grid-demo-1></ClientOnly>

### 分栏偏移
支持偏移指导的栏数
<ClientOnly><grid-demo-2> </grid-demo-2></ClientOnly>

### 每个div的间隔相等
<ClientOnly><grid-demo-3> </grid-demo-3></ClientOnly>

### 对齐方式
通过flex布局来对分栏灵活对齐
<ClientOnly><grid-demo-4> </grid-demo-4></ClientOnly>

### 响应式
预设了phone ipad narrowPc pc widePc 5种尺寸
<ClientOnly><grid-demo-5> </grid-demo-5></ClientOnly>