WeChat applet development realizes grid layout

problem background

In the daily development and learning process of clients and applets, the grid layout is a very scene, which can clearly show the effect of classification. This article will introduce how to realize the grid layout effect in the development of WeChat applets.

problem analysis

First on the renderings, as shown below:
insert image description here

problem solved

Not much to say, just go to the code.
(1) index.js file, the code is as follows:

Page({
  /**
   * 页面的初始数据
   */
  data: {
    grid_list: ['房屋信息', '房屋信息1', '房屋信息2', '房屋信息3', '房屋信息4', '房屋信息5', '房屋信息6', '房屋信息7'],
    open: false
  },
  /**
* 生命周期函数--监听页面显示
*/
  onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1,
      });
    }
  }
})

(2) index.wxml file, the code is as follows:

<view id="container">
  <view class="item" wx:for="{
   
   {grid_list}}">
    <image class="grid-img" src="../../static/img/icon-admin.png"></image>
  {
   
   {item}}
  </view>
</view>

(3) index.wxss file, the code is as follows:

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

.item {
  margin: 10rpx;
  font-size: 7pt;
  border: 1px solid #e5e4e9;  /*设置边框 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.grid-img{
  width: 100rpx;
  height: 100rpx;
  margin: 15rpx;
}

conclusion of issue

This article mainly introduces how to realize the grid layout effect in the development of WeChat applets. Interested students can further study in depth.