gridflex一样用于页面布局。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;
}
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐