grid与flex一样用于页面布局。flex用于一维布局，grid用于二维布局。所以有时候一些网格状的布局相对于grid来说会更加方便。
注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
这里简单使用grid进行网格布局的示例：
效果图：

<div id="container"><div class="item" wx:for="123456789">{{item}}</div>
</div>

#container{display: grid;margin-top: 10rpx;grid-template-columns:repeat(auto-fill,100px);/** 平铺宽度为100px的单元格 */grid-template-rows: 100px;/** 设置高度为100px */grid-auto-rows: 100px;/** 当容易高度不够时，多余的组件高度将怎么分配，默认的高度由单元格内容决定 */justify-content: center;/** 水平居中  */grid-gap: 10rpx;/** 水平和垂直间距为10rpx*/padding: 10rpx;
}.item {font-size: 4em;border: 1px solid #e5e4e9;display: flex;align-items: center;justify-content: center;
}