问题
在页面切分时，我们经常使用flex布局。当需要对页面中的多个元素进行布局时，使用flex布局可以帮助我们快速创建整齐的界面。然而，flex布局也存在一些难以解决的布局问题。
特别是当我们使用v-for循环将后端数据展示在页面上时，如果最后一行的元素较少，并且我们使用 justify-content: space-between; 属性值来处理空白区域的分布，最后一行可能会出现间隔过大的情况。
css
display: flex;
flex-wrap: wrap;
justify-content: space-between;
可以通过调整对齐方向或增加间距来解决这个问题，但这样就无法像之前一样轻松处理居中和间距。
因此，我们引入了grid布局，它能够简单地解决这个问题。
grid 布局
css
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 30px;display: grid;: 改变展示方式为grid。grid-template-columns: 1fr 1fr 1fr;: 指定展示元素的列数为3列，其中1fr是一个自适应单位。gap: 30px;: 指定元素之间的间距为30px。
通过这样的设置，我们可以轻松解决使用flex布局带来的问题。
grid-template-columns
我们可以通过修改grid-template-columns属性的值来更好地理解这个属性。
grid-template-columns: 1fr;
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr 300px 1fr;
grid-template-columns: repeat()
grid-template-columns: repeat() 是CSS Grid布局中的一个属性值，用于定义网格容器中水平方向（列）的网格轨道（track）结构。具体语法如下：
css
grid-template-columns: repeat(number, size1, size2, ...);number: 表示每行中重复的次数。例如，如果要创建一行3次循环排布，则填入数字 3。[size]...: 可以是具体的长度值（如像素、百分比、fr 等）、auto或者是一个 Track-Breadth（网格轨道大小）。这个参数可以有多个，每个值对应一个循环中一列的大小。如果为一个值，则该循环所有列将使用相同的默认大小。
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr 200px);
grid-template-columns: repeat(3); 省略了长度时:
类似于表格中合并单元格的布局
css
grid-column: 1/2;
grid-row: 2/5;grid-row: 从第几行开始 / 第几行+占几个。grid-column: 从第几列开始 / 第几列+占几个。
响应式布局
css
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))正常页面：
缩小页面后：
minmax(min, max) 是CSS Grid布局中的一个函数，用于指定一个轨道（grid track）的大小范围。这个函数接受两个参数，一个是最小值（min），一个是最大值（max）。
min表示轨道的最小大小，可以是一个固定的长度值（如像素px），也可以是一个相对值（如百分比%或视窗单位vw）。max表示轨道的最大大小，同样可以是一个固定的长度值或相对值。
这个函数的作用是告诉布局系统，在满足最小和最大值的范围内，尽可能地占据空间。如果有更多的空间可用，轨道将会增大，但不会超过最大值。如果空间不足，轨道将会缩小，但不会小于最小值。
本人还在学习中，水平有限，本文可能存在纰漏或错误，如有问题欢迎指正，感谢你阅读这篇文章，如果你觉得写得还行的话，不要忘记点赞、评论、收藏哦！祝生活愉快！😘
