网格布局与卡片短代码

网格布局短代码

gird为网格布局，set属性为必填属性，set完整为set="1,2,3,4,5,6"共计6个数字（数字键用","号隔开，至少要有一个数值），数字键最大值为12,数字表示每行的列数。

第1个数字：表示列数
第2个数字：屏幕宽度＞'640px'时的列数
第3个数字：屏幕宽度＞'768px'时的列数
第4个数字：屏幕宽度＞'1024px'时的列数
第5个数字：屏幕宽度＞'1280px'时的列数
第6个数字：屏幕宽度＞'1536px'时的列数

不过实际应用中，只用前两个数值就够用了,比如下方这个结合图片的例子：

{grid set="2,4"}
![](https://pic.imgdb.cn/item/61efde8d2ab3f51d91894b21.jpg)
![](https://pic.imgdb.cn/item/61efde8d2ab3f51d91894b1c.jpg)
![](https://pic.imgdb.cn/item/61efde8d2ab3f51d91894b26.jpg)
![](https://pic.imgdb.cn/item/61efdea52ab3f51d91895f58.jpg)
{/grid}

这个例子效果就是，手机端一行显示2张图片，大屏幕下一行显示4张图片。

同时grid还支持控制图片壁纸，参数为bili，可用值为21x9、16x10、16x9、4x3、2x3、10x14、3x4、1x2、2x1、3x1、4x1这些参数。

比如还是刚刚的例子，设置所有图片比例为10x14代码如下：

{grid set="2,4" bili="10x14"}
![](https://pic.imgdb.cn/item/61efde8d2ab3f51d91894b21.jpg)
![](https://pic.imgdb.cn/item/61efde8d2ab3f51d91894b1c.jpg)
![](https://pic.imgdb.cn/item/61efde8d2ab3f51d91894b26.jpg)
![](https://pic.imgdb.cn/item/61efdea52ab3f51d91895f58.jpg)
{/grid}

卡片短代码

卡片短代码一般结合上方的网格布局使用，使用例子如下

{grid set="1,2" bili="4x3"}
{card}
![](https://pic.imgdb.cn/item/627cb6810947543129b6aa64.jpg)
{center}点击下载{/center}
{/card}

{card}
![](https://pic.imgdb.cn/item/627cb6810947543129b6aa64.jpg)
{center}点击下载{/center}
{/card}

{card}
![](https://pic.imgdb.cn/item/627cb6810947543129b6aa64.jpg)
{center}点击下载{/center}
{/card}

{card}
![](https://pic.imgdb.cn/item/627cb6810947543129b6aa64.jpg)
{center}点击下载{/center}
{/card}
{/grid}

网格布局，加上卡片风格，又结合居中短代码，效果可以自行复制到自己的站点中查看

补充

网格布局内将使得换行失效，如需使用换行，可以使用{br}来实现