SS Grid接管了Web设计的世界。互联网上有大量的关于它的教程，博客和文章，有足够多的知识来源。但是其中大多数都会用很少的实际示例来教你基础知识。因此，在本文章中，我们将在学习过程中查看示例。

1、什么是网格？

CSS Grid允许我们使用网格内的浏览器功能编写更好的布局。在使用CSS Grid之前，我们要么使用自己的自定义网格系统，要么使用Bootstrap之类的东西。虽然使用其他选项的网格也可以正常工作，但是使用CSS网格可以减轻我们在这些解决方案中面临的大部分麻烦。CSS Grid使开发简单和复杂的布局变得轻而易举。在此文章中，我们将学习一些基本术语，然后继续介绍一个简单的布局示例。

2、基本术语

与CSS Grid相关的基本术语如下：（1）Columns；（2）Rows；（3）Cells；（4）Grid Lines；（5）Gutter。

上图中说明了所有术语。此示例为3x2列网格，表示3列和2行。

3、示例布局

既然基本概念已不复存在，我们将使用这些概念进行如下示例布局：

如你所见，有一个页眉和页脚。然后，中心行在右侧的第一列侧栏中有3列导航栏，中间是主要内容区域（占据了该行的大部分）。以下是此示例的示例HTML。

现在，HTML已经不合适我们了，让我们深入研究CSS。首先，让我们给它一些样式，以便我们的HTML像上面一样。这些CSS规则不是CSS网格的一部分，因此你可以根据需要省略它们。

如你所见，我正在对包装容器中的所有项目进行样式设置。我将其背景色设置为orange和给定，bottom而right margins.display flex只是通过设置justify-content和align-items来使项目居中对齐center。接下来，让我们进入其中的CSS网格部分。

在上面的代码中，我们将设置display为grid-。这就是我们将容器转换为的方式grid。接下来，我们设置列和行。我们将使用grid-template-columns和grid-template-rows属性来完成此操作。grid-template-columns允许我们使用适当的值设置列数width。grid-template-rows允许我们根据rows自己的需要设置数量height。

在上面的示例中，共有3列，其中第一列采用1 fraction，第二列采用5 fraction，第三列2 fractions。无论我们将其分成多少件，单个小数单位都表示“一件”。如果你在上面查看相同的示例，则使用相同的概念rows。一共有三行，第一行包含，header该行将整个三列都包含在内。第二行获取导航，内容和一旁的内容，而页脚转到第三行和最后一行并占用所有三列。

这意味着第一行和最后一行占据相同的高度，即5 fractions。中排占据了其余的剩余高度。接下来，我们还将创建一个10px的装订线。我们可以使用grid-gap属性在CSS Grid中进行此操作。最后，我们为包装容器设置一个高度。如果我们在浏览器中查看它，将会得到我们想要的结果，如下所示：

现在，通过设置页眉和页脚的一些属性，使其看起来更像我们想要的样子。我们将告诉页眉和页脚占用整个行。我们将使用grid-column-start和grid-column-end属性来完成此操作，如下所示：

如你所见，页眉和页脚都从grid line1 开始，到grid line4 结束。这使它们可以占用整个行。这将产生我们想要的确切输出，如下所示：

4、完整的代码-整个代码如下：

本文就是这样。你可以在这里关注我以获取更多文章。如果你喜欢它，请不要忘记在社交媒体上分享它。

css 绘制网格线背景，代码如下：

.grid {
	/* 网格单个格子大小 */
	background-size: 35px 35px;
	background-image:
	/* 横线 */
	linear-gradient(0, #e6e6e6 1px, transparent 1px),
	/* 竖线 */
	linear-gradient(90deg, #e6e6e6 1px, transparent 1px);
}

效果如下:

也可以变化一下，将竖线的颜色改为背景同色，制作笔记本横线

么是网格布局？

先看一个例子：

简单来说网格布局就是display: grid，将元素定义为一个网格容器，内部的子元素则变成网格元素。

display: grid;  // 定义网格容器
grid-template-columns: 1fr 1fr 1fr;  // 定义等宽的3列
grid-template-rows: 1fr 1fr; // 定义等高的两行
grid-gap: .5em; // 给每个网格的单元格子间加上间隔

fr是一种新的单位，代表每一行或者列的分数单位（fraction unit）。

重要概念

网格线（grid line）：网格线构成了网格的框架。一条网格线可以水平或垂直，也可以位于一行或一列的任意一侧。如果指定了grid-gap，它就位于网格线上。

网格轨道（grid track）：一个网格轨道是两条相邻网格线之间的空间。网格有水平轨道和垂直轨道。

网格单元（grid cell）：网格上的单个空间，水平和垂直的网格轨道交叉重叠的部分。

网格区域（grid area）：网格的矩形区域，由一个到多个网格单元组成。

网格线编号

网格轨道定义好后，要将每个网格元素放到特定的位置上。浏览器给网格里的每个网格线都赋予了编号。

可以在grid-column和grid-row属性中间用网格线的编号指定网格元素的位置。如果想要一个网格元素在垂直方向上跨越1号网格线到3号网格线，就需要给元素设置grid-column：1 / 3。

需要注意的是，网格的高度是随着内容的高度自动计算的，比如上面a、c两个网格分别占据了两行，一共有5行，最终每行的高度是a、c内容高度的最大值除以所占的行数（2），如果我们设置a只占一行，那么每一行的高度就会放大接近2倍：

命名网格线

有时候记录所有网格线的编号实在太麻烦了，为了能简单点，可以给网格线命名：

grid-template-column: [start] 2fr [center] 1fr [end];

这条声明定义了两列的网格，三条垂直的网格线分别叫做start、center、end。之后在grid-colum中可以这样写：

grid-column: start / center;

命名网格区域

可以将网格区域命名，然后将元素放到指定的网格中：

需要注意的是，网格的命名一定要准确，并且不能少，不然网格就会错位！