什么是Grid布局🤽♂🤽♂
首先Grid有"网格"的意思，所以Grid布局也可以成为网格布局，简而言之就是将页面分为网格，然后让元素去填充
好处是什么？🚴♀🚴♀
我们基本上都使用过flex布局，实际上，Grid布局要比flex布局更加的方便，Grid布局是二维布局，而flex是一维布局
简而言之，其实就是Grid布局将容器分为了行和列，我们可以对网格进行划分从而满足我们布局的需求，而flex布局只能从行来处理问题，因此Grid布局无疑是更方便的。
Grid布局的一些基础知识⛹️♀️⛹️♀️
话不多说我们开始学习Grid布局
首先我们先来讲解一些基础的知识，下面我举一个例子来简单的说明一下。
HTML部分
<div class="box">
<div class="item1">sadas</div>
<div class="item2">ssd</div>
<div class="item3">ssad</div>
<div class="item4">fasf</div>>
</div>
CSS部分
.box{
width:100%;
display:grid;
grid-template-columns:repeat(3,200px);
grid-template-rows:100px 200px;
grid-gap: 20px;
.item1{ background-color:red; }
.item2{ background-color:yellow; }
.item3{background-color:blue; }
.item4{ background-color:green;}
}
在这个案例当中我们首先通过display:grid;设置父级元素盒子样式，当我们这样做了之后，他的子系盒子就会受到影响变成网格布局
然后我们呢还可以通过 grid-template-rows grid-template-column这两种方式来分别划分行和列，上面的那种写法比较的简洁，之恶使用了repeat，第一个参数就是表明要分成的行数或者列数，后面第二个参数就是长度。
核心部分（基础）
grid-template-columns:repeat(3,200px)这个属性所表达的含义就是将容器分为三列，每列的宽度为200px。grid-template-rows:100px 200px这个属性所表达的就是将容器分为两行，第一行宽度为100px，第二行的宽度为200pxgrid-gap: 20px这个属性所表达的含义就是行和列之间的间隔。
可能学习到这里大家还是感觉这个gird布局不也不过如此吗，也是很单一，很死板，那么你就错误了，下面请听我继续讲解。
.grid-item {
grid-column: 1 / 3; /* 跨越从第1列到第3列 */
grid-row: 2; /* 占据第2行 */
}
这个属性可以实现子元素中的位置跨越，这个是什么意思呢？接下来我们将详细的讲解一下。
因为Grid布局其实就是将容器划分为一个一个的网格，那么肯定就有网格线，我们在定义网格的时候，其实定义的是行和列的轨道，然后Grid会根据我们定义的网格轨道的行和列来定义网格线的编号，以便于我们对于其中元素的定义。
使用这种布局的相较于flex布局可以更加的自由定义
所谓的”网格线“其实就是因为在进行盒子的分割的过程中产生的边界线，比如如果我将一行分成3列的这种形式（就如上图所示）那么就自然会生成4条线（不要被上图中的紫色格子给迷惑了）
但是值得注意的是，我们从父级这样划分，但是子级不一定只占满一个盒子，我们可以横跨多个（根据自己实际的所需的大小来定义）
所以 grid-column: 1 / 3这个属性的含义就是这个盒子横跨第1条线到第3条线。
grid-row: 2;这个属性就是表明这个盒子占据第2行，然后加上上面的属性横跨第1条线到第3条线。
间距的设置
.grid-container {
grid-gap: 10px; /* 行和列之间的间隔 */
}
至于说这部分代码就比较好理解了，这是为了每个网格之间隔开一段的间距，上面这张图是在网页选中的情况下展示的（效果不太好将就一下哈），可以看到行和列之间都是同样的间隔距离10px，可以使盒子之间的距离显得不是那么的紧凑。
居中的设置
.grid-container {
justify-items: center; /* 水平居中对齐 */
align-items: center; /* 垂直居中对齐 */
}
这部分和flex布局比较相似，都是设置盒子的水平居中和垂直居中，比较的好理解。
总结 🛰🛰
这部分只是grid布局的一个基础部分，只能算使入了一个门，想要真正的掌握好grid布局还需要更加丰富的知识，后续我会继续给大家更新，同时也是我的再一次学习。
