冷门的grid网格布局，却能解决flex产生的bug，gird布局详细讲解

前言：哈喽，大家好，我是码喽的自我修养！今天给大家分享冷门的grid网格布局，却能解决flex产生的bug，gird布局详细讲解！并提供具体代码帮助大家深入理解，彻底掌握！原创不易，如果能帮助到带大家，欢迎收藏+关注哦 💕 

使用flex布局的痛点

 如果使用justify-content: space-between;让子元素两端对齐，自动分配中间间距，假设一行4个，如果每一行都是4的倍数那没任何问题，但如果最后一行是2、3个的时候就会出现下面的状况：

看一个简单的例子： 

/* flex布局 两端对齐 */
<template>
	<view style="text-align: center;">flex布局效果</view>
	<view class="testLayout">
		<view class="box" v-for="item in 8">
	    </view>
    </view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
	.testLayout{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 30rpx;
		height: 800rpx;
		.box{
			width: 220rpx;
			height: 220rpx;
			background-color: #3335;
		}
	}
</style>

如何想让最后一行左对齐是有办法的，大家可以自行去搜索办法，能实现但是操作起来有些麻烦，但是如果这种布局使用grid布局的话，就会变的非常容易。

同样的布局，将flex改为grid

<template>
	<view style="text-align: center;">gird布局效果</view>
	<view class="testLayout">
		<view class="box" v-for="item in 11">
	    </view>
    </view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
	.testLayout{
		/* grid布局 两端对齐,最后一行左对齐*/
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 30px;   
		padding: 30rpx;
		height: 800rpx;
		.box{
			// width: 220rpx;
			// height: 220rpx;
			background-color: #ff0099;
		}
	}
</style>

解释一下上面的代码：

• display：grid 是转为网格布局，这个是必须的
• grid-template-columns：1fr | px 这是将网格分为几列，1fr是自适配单位，可以当成栅格
• gap:30px 这是网格四周的间隔
• 注意：这三个属性是给父容器添加的，子元素，可以不用设置宽度，也不用设置margin间距即可完成如下布局。

看，上面的grip布局，最后一行不是4的倍数，但是可以左对齐，不会像flex布局一样的bug。

深入了解一下grid-template-columns属性

• grid-template-columns: 1fr;（独占一行）

• grid-template-columns: 1fr 1fr;（一行分为两列）

• grid-template-columns: 1fr 200px 1fr;（中间固定200px，两边自动平均分配）

• grid-template-columns: 1fr 1fr 1fr 1fr 1fr;如果5列的值相同，可以使用repeat()函数，grid-template-columns: repeat(5,1fr) 当然将1fr换成固定的px尺寸也可以。

• grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); 这种写法可以用来做响应式布局，auto-fill主轴上指定的宽度或者重复次数是最大可能的正整数，minmax最小值255px、最大值1fr代表剩余空间的比例。

注意：实现这种响应式布局，一定要注意父容器不能使用固定宽度，可以将父容器改为如：80%，这样就能根据屏幕的宽度，自动展示一行展示几个了。

grid-row和grid-column可以控制某个元素占领几份

示例代码：

<template>
	<view style="text-align: center;">gird布局效果</view>
	<view class="testLayout">
		<view class="box" v-for="item in 10">
		</view>
		<view class="box1 box">
		</view>
    </view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
	.testLayout{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 30px;   
		padding: 30rpx;
		height: 1200rpx;
		.box{
			background-color: #ff0099;
		}
		.box1{
				grid-row: 1/3;
			    grid-column: 1/3;
				background-color: #00f099;
		}
	}
</style>

以grid-row行为例，从第几列开始 / 第几列+想占几个；

好了，本文就到这里吧，点个关注 再走嘛~   

🚀 个人简介：某大型国企高级前端开发工程师，7年研发经验，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作    者：码喽的自我修养❣️
📝 专    栏： HTML5与CSS3
🌈 若有帮助，还请 关注➕点赞➕收藏  ，不行的话我再努努力💪💪💪 

 更多专栏订阅推荐：

👍 前端工程搭建
💕 vue从基础到起飞

✈️ JavaScript深入研究

⭐️ uniapp与微信小程序

📝 前端工作常见问题汇总

✍️ GIS地图与大数据可视化