微信小程序页面网格布局代码
时间: 2023-02-24 16:48:53 浏览: 446
微信小程序经典demo学习案例:flex布局栅格
微信小程序使用 WXML 和 WXSS 进行页面布局。以下是一个简单的网格布局的示例代码:
WXML:
```
<view class="grid">
<view class="grid-item"></view>
<view class="grid-item"></view>
<view class="grid-item"></view>
<view class="grid-item"></view>
<view class="grid-item"></view>
<view class="grid-item"></view>
</view>
```
WXSS:
```
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 33.33%;
height: 150px;
background-color: #f5f5f5;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
box-sizing: border-box;
}
.grid-item:nth-child(3n) {
border-right: none;
}
.grid-item:nth-last-child(-n + 3) {
border-bottom: none;
}
```
以上代码创建了一个包含 6 个格子的网格布局。每个格子都是一个宽度为 33.33% 的长方形,并且有一个边框和背景颜色。
请注意,这只是一个简单的示例,你可以根据需要修改它以适应自己的需求。
阅读全文