微信小程序实现不规则页面布局

2026 年 03 月 25 日

7 次浏览

2423字数

###### 一、wxml代码

```html

<view class="grid">
    <view class="grid_item grid_item1">grid-item1</view>
    <view class="grid_item grid_item2">grid-item2</view>
    <view class="grid_item grid_item3">grid-item3</view>
    <view class="grid_item grid_item4">grid-item4</view>
    <view class="grid_item grid_item5">grid-item5</view>
    <view class="grid_item grid_item6">grid-item6</view>
    <view class="grid_item grid_item7">grid-item7</view>
    <view class="grid_item grid_item8">grid-item8</view>
    <view class="grid_item grid_item9">grid-item9</view>
    <view class="grid_item grid_item10">grid-item10</view>
    <view class="grid_item grid_item11">grid-item11</view>
    <view class="grid_item grid_item12">grid-item12</view>
    <view class="grid_item grid_item13">grid-item13</view>
    <view class="grid_item grid_item14">grid-item14</view>
    <view class="grid_item grid_item15">grid-item15</view>
</view>
```

###### 二、wxss代码

```css
.grid {
    width: calc(100% - 20rpx);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(7, 140rpx);
    grid-gap: 10rpx;
}

.grid_item {
    background-color: pink;
}

.grid_item1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

.grid_item2 {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
}

.grid_item3 {
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 1;
}

.grid_item4 {
    grid-column-start: 5;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 1;
}

.grid_item5 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 3;
    grid-row-end: 3;
}

.grid_item6 {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 3;
}

.grid_item7 {
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 5;
}

.grid_item8 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 6;
}

.grid_item9 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 6;
}

.grid_item10 {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 5;
    grid-row-end: 7;
}

.grid_item11 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 6;
    grid-row-end: 7;
}

.grid_item12 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 6;
    grid-row-end: 8;
}

.grid_item13 {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 7;
    grid-row-end: 8;
}

.grid_item14 {
    grid-column-start: 5;
    grid-column-end: 5;
    grid-row-start: 7;
    grid-row-end: 8;
}

.grid_item15 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 7;
    grid-row-end: 7;
}
```

###### 三、效果图

![效果图](https://www.renlmingj.cn/usr/uploads/2026/03/4183721639.png)

最后修改：2026 年 03 月 25 日

如果觉得我的文章对你有用，请随意赞赏

微信小程序实现不规则页面布局

renlmingj • 2026 年 03 月 25 日

微信小程序实现不规则页面布局

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

sql语句总结

canvas_vue2绘制图片及文字组件

echarts_h5_vue3封装

echarts_h5_vue2封装

more_vue2展开收起组件

uniapp_v2微信小程序点击不会触发父级事件

此内容被密码保护

uniapp_v2滑动出现返回顶部插槽组件

canvas_vue2绘制图片及文字组件

uniapp_v2微信小程序tabbar组件封装

微信小程序实现不规则页面布局

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

微信小程序实现不规则页面布局

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款