这是我参与「第四届青训营」笔记创作活动的第1天

Grid（网格）布局

网格布局是什么？

网格是由一系列水平及垂直的线构成的一种布局模式。根据网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。

一个网格通常具有许多的列（column） 与行（row） ，以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter） 。

在CSS中创建自己的网格

定义一个网格

将容器的display属性设置为grid来定义一个网络。与弹性盒子一样，将父容器改为网格布局后，他的直接子项会变为网格项。

.container {
    display: grid;
}

与弹性盒子不同的是，在定义网格后，网页并不会马上发生变化。因为display: grid的声明只创建了一个只有一列的网格，所以你的子项还是会像正常布局流那样从上而下一个接一个的排布。

为了让我们的容器看起来更像一个网格，我们要给刚定义的网格加一些列。那就让我们加三个宽度为200px的列。当然，这里可以用任何长度单位，包括百分比。

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

使用fr单位的灵活网格

除了长度和百分比，我们也可以用fr这个单位来灵活地定义网格的行与列的大小。

创建 3 个1fr的列：

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

fr 单位按比例划分了可用空间，如果没有理解，可以试着改一下数值，看看会发生什么，比如下面的代码：

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

这个定义里，第一列被分配了2fr可用空间，余下的两列各被分配了1fr的可用空间，这会使得第一列的宽度是第二第三列的两倍。

另外，fr可以与一般的长度单位混合使用，比如grid-template-columns: 300px 2fr 1fr，那么第一列宽度是300px，剩下的两列会根据除去300px后的可用空间按比例分配。

网格间隙

使用 grid-column-gap 属性来定义列间隙；使用 grid-row-gap 来定义行间隙；使用 grid-gap 可以同时设定两者。

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
}

间隙距离可以用任何长度单位包括百分比来表示，但不能使用fr单位。

重复构建行/列

你可以使用repeat来重复构建具有某些宽度配置的某些列。举个例子，如果要创建多个等宽轨道，可以用下面的方法。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

和之前一样，你仍然得到了 3 个1fr的列。第一个传入 repeat 函数的值（3）表明了后续列宽的配置要重复多少次，而第二个值（1fr）表示需要重复的构建配置，这个配置可以具有多个长度设定。例如repeat(2, 2fr 1fr)，如果你仍然不明白，可以实际测试一下效果，这相当于填入了2fr 1fr 2fr 1fr。

基于线的元素放置

在定义完了网格之后，我们要把元素放入网格中。我们的网格有许多分隔线，第一条线的起始点与文档书写模式相关。在英文中，第一条列分隔线（即网格边缘线）在网格的最左边而第一条行分隔线在网格的最上面。

我们根据这些分隔线来放置元素，通过以下属性来指定从那条线开始到哪条线结束。

这些属性的值均为分隔线序号，你也可以用以下缩写形式来同时指定开始与结束的线。

注意开始与结束的线的序号要使用/符号分开。

.a {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 3;
}

使用 grid-template-areas 属性放置元素

另一种往网格放元素的方式是用grid-template-areas属性，并且你要命名一些元素并在属性中使用这些名字作为一个区域。

.container {
  display: grid;
  grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}

以上是MDN文档的案例，其实没必要给区域命名，可以直接用线的开始结束表示区域

.a {
  grid-area: 1/1/3/3;
}

.a {
  grid-area: 2/2/4/4;
}
.b {
  grid-area: 1/1/3/3;
}

grid-template-areas属性的使用规则如下：

你需要填满网格的每个格子
对于某个横跨多个格子的元素，重复写上那个元素grid-area属性定义的区域名字
所有名字只能出现在一个连续的区域，不能在不同的位置出现
一个连续的区域必须是一个矩形
使用.符号，让一个格子留空

好了，以上基本就是Grid布局的基本内容了。

关于布局，其实Flex和Grid布局能实现绝大多数的页面布局了，那还有float和position呢？单纯使用float实现图文混合排版的页面（例如一些文字环绕图片的效果），使用position实现部分结点相对视窗固定的效果就够了。

最后，希望大家一直保持好奇心，毕竟前端的新技术，新特性还在不停的出现。一起加油，芭芭拉冲鸭！！！

Grid布局 | 青训营笔记