效果图如下：
网络上有几种作法，在此我采用了〝学而时习之〞所提供的做法。其作法很简单，就是将所有格子内容用 wx:for 逐一呈现，然后利用 css 控制格子大小，且宽度不足时会自动换行的特性，达到九宫格的显示效果。
在 menu.wxml 中布置如下代码：
<view class="grids"><view class="grids-cell" wx:for="{{itemList}" wx:key="name"><navigator url="{{item.url}}"><view class="grids-cell-icon"><image src="{{item.pic}}" mode="scaleToFill" /></view><text class="grids-cell-label">{{item.name}}</text></navigator></view></view>
在 menu.js 中设置资料：
data: {itemList:[{name: "语文",url: "../C1/index",pic:"../../images/icon/01.png"},{name: "数学",url: "../C2/index",pic: "../../images/icon/02.png"},{name: "英语",url: "../C3/index",pic: "../../images/icon/03.png"},{name: "历史",url: "../C4/index",pic: "../../images/icon/04.png"}]},
在menu.wxss设置样式：
.grids {position: relative;overflow: hidden;padding:10px;text-align:center;}.grids-cell {position: relative;float: left;width: 30%;margin:5px;}.grids-cell-icon {display: block;width: 100%;height: 100%;text-align:center;margin-top: 5px;}.grids-cell-icon image {width: 80px;height: 80px;}.grids-cell-label {display: block;font-size:14px;text-align:center;}
参考资料：
小程序开发系列(四)九宫格另一种实现
/xxdddail/article/details/70314211
