# 快速开始
先准备一个具备宽度和高度的DIV。
```html
```
然后就可以通过 [P.init](/zh-cn/global?id=init) 方法初始化一个 PoPo 实例并生成对应的布局，接下来我们分别创建两个相对简单的布局。
## 创建一个均匀布局
```html
PoPo
```
这样我们就创建了一个共有12个均匀面板的布局：
## 创建一个自由布局
```html
PoPo
```
这样我们就创建了一个共有5个不同宽高面板的栅格布局：
## 添加面板布局
我们在上面的自由布局基础上为中间的三个面板添加[面板布局](/zh-cn/panel.md)
```html
PoPo
```