手册版本 V5.0

样式介绍

宫布局不适合封装组件故使用样式来实现，您可以通过复写下面的样式来修改宫格布局 : 
.gui-grids-items{width:138rpx;} // 宫格项目宽度
.gui-grids-icon{height:80rpx; font-size:68rpx; line-height:80rpx; text-align:center;} // 宫格图标默认样式
.gui-grids-icon-img{width:80rpx; height:80rpx; border-radius:6rpx;} // 宫格图片默认样式
.gui-grids-text{line-height:50rpx; text-align:center; font-size:24rpx; margin-top:2px;} // 宫格文本默认样式

宫格DOM结构

<view class="gui-grids gui-flex gui-rows gui-wrap gui-margin-top">
	<view class="gui-grids-items gui-flex gui-columns gui-align-items-center">
		<image class="gui-grids-icon-img" src="图片地址"></image>
		<text class="gui-grids-text gui-icons gui-primary-color">文本</text>
	</view>
	<view class="gui-grids-items gui-flex gui-columns gui-align-items-center">
            <text class="gui-grids-icon gui-icons gui-color-gray">图标Unicode</text>
            <text class="gui-grids-text gui-icons gui-color-gray">set</text>
	</view>
</view>

兼容平台

演示代码