基础用法
cell-1
cell-2
查看代码
1 | {% grid bg:box %} |
语法格式
1 | {% grid [bg:box/card] [w:240px] [c:2] [gap:16px] [br:12px] %} |
设置列数
默认的布局为【最小宽度为240px】即如果页面宽度大于 480px 则会显示为 2 列,大于 720px 则会显示为 3 列,以此类推。
也可以通过 c:
属性来设置列数,例如:c:3
cell-1
cell-2
cell-3
可以使用w
参数修改最小宽度。
背景样式
不设置样式
cell-1
cell-2
cell-3
普通box样式
cell-1
cell-2
cell-3
卡片样式
cell-1
cell-2
cell-3
设置间距
默认间距为16px,如果需要修改,可以使用gap
属性,例如:gap:24px
cell-1
cell-2
cell-3
设置圆角
默认圆角为12px,如果需要修改,可以使用br
属性,例如:br:30px
cell-1
cell-2
cell-3
属性
属性 | 说明 |
---|---|
bg | 设置背景样式 box/card |
br | 设置圆角 |
c | 设置列数,不设置按照宽度自适应 |
gap | 设置间距 |
w | 设置最小宽度 |