什么是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-rowsgrid-template-column这两种方式来分别划分行和列，上面的那种写法比较的简洁，之恶使用了repeat，第一个参数就是表明要分成的行数或者列数，后面第二个参数就是长度。

核心部分（基础）

• grid-template-columns:repeat(3,200px)这个属性所表达的含义就是将容器分为三列，每列的宽度为200px。
• grid-template-rows:100px 200px这个属性所表达的就是将容器分为两行，第一行宽度为100px，第二行的宽度为200px
• grid-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条线。

如上图所示这是我们加上这个样式之后，第二行的盒子果然横跨了三条线，这是在原来flex布局中无法实现的。

间距的设置

.grid-container {
  grid-gap: 10px; /* 行和列之间的间隔 */
}

至于说这部分代码就比较好理解了，这是为了每个网格之间隔开一段的间距，上面这张图是在网页选中的情况下展示的（效果不太好将就一下哈），可以看到行和列之间都是同样的间隔距离10px，可以使盒子之间的距离显得不是那么的紧凑。

居中的设置

.grid-container {
  justify-items: center; /* 水平居中对齐 */
  align-items: center;   /* 垂直居中对齐 */
}

这部分和flex布局比较相似，都是设置盒子的水平居中和垂直居中，比较的好理解。

总结 🛰🛰

这部分只是grid布局的一个基础部分，只能算使入了一个门，想要真正的掌握好grid布局还需要更加丰富的知识，后续我会继续给大家更新，同时也是我的再一次学习。