第一次使用Grid布局

这是一篇分享关于第一次使用grid布局以及介绍布局分布的简单文章
哈哈 这是我的第一次使用Grid布局 之前一直使用Flex布局。

示例代码

width: 85vw;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

在上面代码中 首先要创建一个容器 也就是图示中 黄色整片区域就是容器。
grid-gap就是容器中每个item 相隔的间隙

grid-template-columns 参考MDN 参数为 1.列数 2.宽度

repeat是一个特殊的函数 可作用于 grid-template-columns 和 grid-template-rows的属性； 参考：

基本用法
repeat() 函数接受两个参数：重复次数和轨道定义。例如：
grid-template-columns: repeat(5, 1fr);
这行代码表示创建五个宽度为 1fr 的列。
使用长度值
我们可以使用不同的长度单位来定义轨道的大小，例如 px、em、% 等。例如：
grid-template-columns: repeat(3, 120px);
这行代码表示创建三个宽度为 120 像素的列。

我使用的两个参数 auto-fit 为 自动填充，minmax(300px, 1fr) min：定义了网格轨道的最小尺寸。max：定义了网格轨道的最大尺寸。1fr则表示为一个弹性单位 则有 有限的空间条件下尽可能的拉伸将容器填满。

end.