一、简介
之前我们实现九宫格采用float浮动实现,后来用display弹性盒子实现,但是弹性盒子也有缺点,但凡不够倍数,排版就会发生变化,很不友好,这时候我们就可以用网格布局了。如以下:
<!-- 九宫格 -->
<view class="list">
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
<view>7</view>
<view>8</view>
</view>
<style lang="scss">
.list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
view{
width: 32%;
height: 50px;
background-color: pink;
margin-bottom: 10px;
}
}
</style>
二、网格布局
<!-- 九宫格 -->
<view class="list">
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
<view>7</view>
<view>8</view>
<view>9</view>
</view>
<style lang="scss">
.list {
display: grid; // 声明一个容器
grid-template-columns: repeat(3, 1fr);//分成三栏,每栏均等分
grid-gap: 10px 20px; //行间距 列间距
view {
height: 50px;
background-color: pink;
}
}
</style>
其他效果
代码:
<view class="lookData">
<view></view>
<view></view>
<view></view>
</view>
.lookData {
display: grid; // 声明一个容器
grid-template-columns: repeat(2, 1fr); //分成2栏,每栏均等分
grid-column-gap: 50rpx; //列间隔 这个很重要
}
.lookData>view{//此时不需要设置宽度,让其自动去计算
background: #FFFFFF;
border: 1rpx solid #BFBFBF;
border-radius: 20rpx;
margin-bottom: 44rpx;
padding:20rpx 30rpx;
box-sizing: border-box;
}
不均等分 自定义设置距离
display: grid; // 声明一个容器
grid-template-columns:repeat(3, 180rpx);//3栏 每个宽度180rpx
grid-gap: 10rpx 10rpx; //行间距 列间距
三、总结
其他参考:
grid网格布局:
https://juejin.cn/post/6854573220306255880
https://zhuanlan.zhihu.com/p/256353171
display: grid; // 声明一个容器
grid-template-columns: repeat(3, 1fr); //分成三栏,每栏均等分
grid-column-gap: 37rpx; //列间距
grid-row-gap: 20rpx;//行间距
justify-items: center; //内容水平居中