微信小程序: 使用grid进行网格布局

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;
}