### 基本用法 定义栅格系统，用`repeat`属性来定义栅格列数，用`span`属性来设置列跨越的栅格数。 ``` html 1/6 1/6 1/6 1/6 1/6 1/6 2/24 4/24 8/24 10/24 1/3 2/3 ``` ### 间隙 ```html none none none none none none none none
small small small small small small small small
normal normal normal normal normal normal normal normal
large large large large large large large large
small normal small normal small normal small normal small normal small normal small normal small normal ``` ### 列间隙 ```html none none none none
mini mini mini mini
small small small small
normal normal normal normal
large large large large
huge huge huge huge ``` ### 列偏移 ```html 4/12 4/12 offset=4 3/12 offset=3 3/12 offset=3 ``` ### 列排序 ``` html 4/10 push=6 6/10 pull=4 2/10 push=8 3/10 push=5 5/10 push=5 ``` ### Flex模式 #### 水平分布方式 ``` html start start start center center center end end end space-between space-between space-between space-around space-around space-around ``` #### 垂直对齐方式 ``` html start start start center center center end end end baseline baseline baseline stretch stretch stretch ``` ### 响应式 参考了[Bootstrap](https://getbootstrap.com)的响应式设计，预设了五个响应尺寸：`mini`、`small`、`medium`、`large`和`huge`。 ``` html Responsive Responsive Responsive Responsive Responsive Responsive ```