基础用法

cell-1

cell-2

查看代码
1
2
3
4
5
6
7
8
{% grid bg:box %}
<!-- cell -->
cell-1

<!-- cell -->
cell-2

{% endgrid %}

语法格式

1
2
3
4
5
6
7
8
9
{% grid [bg:box/card] [w:240px] [c:2] [gap:16px] [br:12px] %}

<!-- cell -->
left body

<!-- cell -->
right body

{% endgrid %}

设置列数

默认的布局为【最小宽度为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 设置最小宽度