Grid 布局指的是 CSS Grid Layout，它和以往 CSS 框架（CSS Framework）中所说的网格系统（Grid System）有所不同。它是一个基于网格的二维布局系统，在 CSS 中有三个版本的规范（Level 1、Level 2 和 Level 3，其中 Level 1 和 Level 2 已进入 W3C 规范 TR 阶段，Level 3 目前还在 ED 阶段）从不同的角度定义 CSS 网格布局模块，这几个模块是专门为解决布局问题而创建的。另外，到目前为止，在 CSS 的系统中，只有 CSS Grid 布局才是二维布局。同时它也是一个复杂的布局系统，所涉及到布局知识要比以往了解的布局模块（比如我们熟悉的 Flexbox 布局）要复杂得多。为此，在图解 CSS 系列中，将分几篇文章来和大家一起探讨 CSS Grid 布局模块。

在上一节中，主要介绍了 CSS 网格布局中的一些重要概念和相关术语。从这些概念和术语中，从侧面也再次说明CSS 网格布局到目前为止是最为复杂的一个布局系统，换句话说，CSS 网格布局系统中会有很多属性，这些属性和 Flexbox 布局有些类似，有些属性只能作用于网格容器，有些属性只能作用于网格项目。而在这篇文章中，先从可用于网格容器的属性，即使用display属性创建网格容器和网格项目， grid-template-areas、grid-template-columns 和 grid-template-rows 以及这三个属性的简写属性grid-template 来定义显式网格。如果感兴趣的请继续往下阅读。

在第二部分中主要介绍了如何使用display来创建网格容器和网格项目，以及怎么使用 grid-template-columns、grid-template-rows 和 grid-template-areas 定义显式网格。在这部分（Part3）将和大家探讨如何设置网格轨道尺寸？简单地说，在grid-template-columns 和 grid-template-rows 中可以显式设置网格轨道大小（列宽和行高），而且设置大小的方式有很多种方式，比如使用不同的长度单位，使用关键词，使用CSS函数等来设置网格轨道大小。如果你感兴趣的话请继续往下阅读。

在“图解CSS：Grid布局” 系列 的第三部分 主要探讨了，在 grid-template-columns 和 grid-template-rows 中使用长度值来设置网格轨道尺寸大小。这里长度值指的是使用不同单位（比如，px，%，em，rem和vw等）值，并且花了较长的篇幅和大家探讨了 fr （弹性系数，又称<flex>系数）给网格轨道尺寸带来的变化以及 fr 在网格轨道中是怎么计算的。不过，在网格布局中，除了使用上一章节中用的带有不同单位的长度值之外，还可以使用一些关键词，比如接下来要介绍的 none 和 auto（我们熟悉的），min-content、max-content、fit-content 等关键词以及fit-content()函数。阅读完这篇文章之后，你就能了解这些关键词是如何帮助我们来设置网格轨道尺寸。感兴趣的同学请继续往下阅读。

前面花了两个章节（Grid布局 Part3 和 Part4）介绍了在grid-template-columns 和 grid-template-rows 中使用固定长度值，动态值和一些关键词来设置网格轨道的大小。除了这些之外，还可以使用一些函数，比如minmax(min, max)、repeat() 等来设置网格轨道大小。在这一章节点，主要围绕着在 grid-template-columns 和 grid-template-rows 属性中如何使用函数（minmax(min, max) 和 repeat()）设置网格轨道尺寸，感兴趣的话，请继续往下阅读。

CSS 网格布局中有 显式网格 和 隐式网格 之分，在 CSS 网格布局中可以使用 grid-template-columns 、 grid-template-rows 和 grid-template-areas 可以定义显式网格，并且可以定义显式网格固定的网格轨道数量，同时 grid-template-columns 和 grid-template-rows 可以用来显式指定网格轨道尺寸。而在 CSS 网格布局中，可以在网格容器上使用 grid-auto-columns 、 grid-auto-rows 和 grid-auto-flow 可以显式定义隐式网格，并且 grid-auto-columns 和 grid-auto-rows 可以用来指定隐式网格轨道的尺寸。那么在这篇文章中，主要和大家一起探讨在 CSS 网格布局中如何定义隐式网格和指定隐式网格轨道尺寸。

在 Part6 和大家一起探讨了在网格布局中怎么使用 grid-auto-columns 和 grid-auto-rows 以及 grid-row、grid-column 和 grid-area 创建隐式网格。在使用 grid-row 、grid-column 或 grid-area 放置网格项目的时候，有可能会造成网格缺口出现。在网格布局中，我们可以使用 grid-auto-flow 属性让网格项目更好的被放置到网格单元格上。这篇文章主要和大家探讨了网格项目自动放置属性 grid-auto-flow 的基本语法和自动放置规则等特性，感兴趣的继续往下阅读。

在 CSS 网格系统中，网格线是一个非常重要的概念。默认情况之下，只要定义了一个网格系统，就会默认创建以数字为索引号的网格线名称（行网格线名称和列网格线名称）。除此之外，还要以在 grid-template-columns 和 grid-template-rows 中显式的在中括号[]中给网格线指定名称。通过前面章节的学习，CSS 网格系统中有显式网格和隐式网格之分，同样的，网格线也有显式网格线和隐式网格线之分，位于显式网格上的网格线被称为显式网格线，位于隐式网格上的网格线被称为隐式网格线。而且在网格系统中，明确放置网格项目时离不开网格线，换句话说，网格线命名的好不好直接会影响我们网格项目放置。在这篇文章中将主要和大家探讨网格线怎么命名？感兴趣的请继续往下阅读。

前面花了很多篇幅和大家一起探讨了 CSS 网格布局系统中的一些重要概念，并且深入探讨了运用于网格容器上属性的知识和使用。不过我们只围绕着 grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns 和 grid-ato-flow 展开，对于子网格、瀑布流以及对齐等相关的话题并未展开，留到后面再做探讨。在学习运用于网格容器上属性的时候，在相关的示例中用到了用于网格项目的属性，比如grid-row、grid-column、grid-area等，并且还多次提到网格项目放置这个概念。或许你对它们的使用有了一个基本的了解，但要彻底掌握他们，我们还是很有必要花更多的时间来学习和探讨。

在 CSS 网格中除了使用明确指定网格项目位置的属性之外，还可以使用grid-auto-flow有不同模式来自动放置网格项目。到目前为止，我们所阐述的网格项目都是用不同的网格区域来放置网格项目，但网格布局中的网格项目有可能是会重叠在一起的。那么接下来的一节中，将和大家一起来探讨网格项目重叠和定位相关的知识。