css——九宫格、弹性盒子display:flex、网格布局grid

耶啵奶膘

已于 2023-03-03 16:21:37 修改

阅读量1.8k

点赞数 1

分类专栏： CSS 文章标签： css css3 html

于 2022-09-20 00:01:25 首次发布

本文链接：https://blog.csdn.net/xulihua_75/article/details/126944450

版权

CSS 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

一、简介

之前我们实现九宫格采用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; //内容水平居中