GraceUI 宫格布局



宫格布局

样式介绍

宫布局不适合封装组件故使用样式来实现，您可以通过复写下面的样式来修改宫格布局 :

.gui-grid{flex-direction:row !important; flex-wrap:wrap;}
.gui-grid-item{width:137.5rpx; font-size:0; flex-direction:column !important; align-items:center !important; margin:0;}
.gui-grid-icon{height:80rpx; font-size:68rpx; line-height:80rpx; text-align:center;}
.gui-grid-icon-img{width:80rpx; height:80rpx; border-radius:6rpx;}
.gui-grid-text{line-height:50rpx; text-align:center; font-size:24rpx; margin-top:2px;}

宫格DOM结构

<view class="gui-grid">
    <view class="gui-grid-item">
        <text class="gui-grid-icon gui-icons gui-color-gray">&#xe613;</text>
	<text class="gui-grid-text gui-icons gui-color-gray">set</text>
    </view>
    <!-- 更多项目 -->
</view>

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

NVUE 版本

登录并购买 GraceUI 后可以查阅完整手册内容。