《样式设计004：布局-使用grid》

描述：在开发小程序过程中，发现一些不错的案例，平时使用也比较多，稍微总结了下经验，以下内容可以直接复制使用，希望对大家有所帮助，废话不多说直接上干货！

一、小程序布局-使用grid

（一）样式图

（二）样式代码

2.1：wxml代码

<!-- 分类栏 -->
<view class="qxjs-classified-bar margin-top" style="width: 100%; height: 30px; display: flex; flex-direction: row;">
  <view class="qxjs-classified-icon margin-left-sm  " style="width: 8%; background-position: -24px -75px;"></view>
  <view class="qxjs-classified-title" style="width: 88%; ">这是分类001</view>
</view>
 
<view class="qxjs-classified-cont bg-grey">
  <view class="qxjs-classified-item {{index%2==0?'bg-cyan':'bg-blue'}}" wx:for="{{contentList}}" wx:key>
    {{item.title}}
  </view>
</view>

2.2：wxjs代码

// pages/all/demo.js
Page({

  //页面的初始数据
  data: {
    contentList: [{
      id: '1001',
      contentUrl: 'https://t7.baidu.com/it/u=727460147,2222092211&fm=193&f=GIF',
      title:'这是标题部分1',
      content: '这是底部描述部分1',
    },
    {
      id: '1002',
      contentUrl: 'https://t7.baidu.com/it/u=727460147,2222092211&fm=193&f=GIF',
      title:'这是标题部分2',
      content: '这是底部描述部分2',
    },
    {
      id: '1003',
      contentUrl: 'https://t7.baidu.com/it/u=727460147,2222092211&fm=193&f=GIF',
      title:'这是标题部分3',
      content: '这是底部描述部分3',
    },
    {
      id: '1004',
      contentUrl: 'https://t7.baidu.com/it/u=727460147,2222092211&fm=193&f=GIF',
      title:'这是标题部分4',
      content: '这是底部描述部分4',
    }
  ], 


  },

  // 生命周期函数--监听页面加载
  onLoad(options) {

  },
 
})

2.3：wxss代码 

/* -----------------分类-------------------- */
.qxjs-classified-icon {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  /* 设置容器高度为屏幕高度 */
  /* height: 100vh; */
  background-image: url('https://img0.baidu.com/it/u=948260463,3724272611&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=583');
  /* 设置矢量图路径 */
  background-size: 350px 350px;
  /* 设置矢量图的尺寸 */

}

.qxjs-classified-title {
  background-color: #FDFDFD;
  display: flex;
  align-items: center;
  /* 垂直居中 */
  padding-left: 5px;
  font-size: 16px;
  font-weight: bold;
  font-family: "Arial", sans-serif;
  letter-spacing: 2px;
}
 

.qxjs-classified-cont {
  margin-left: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 两列，每列宽度相等 */
  grid-template-rows: auto;
  /* 自动高度 */
}
.qxjs-classified-item  {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  /* 设置每个子项的宽度为父级宽度的45% */
  width: 90%;
  /* 设置每个子项的高度 */
  height: 50px;
  /* 设置子项之间的垂直间隔 */
  margin: 8px 10px; 
}