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 网格布局体系过于庞大且复杂，因此在介绍 Grid 布局时将会分多个部分来介绍，这是第一部分，主要介绍了 CSS Grid 布局中的一些重要术语和概念。只有了解了这些概念才能更好的理解和掌握 CSS Grid 布局。如果对 CSS Grid 布局体系感兴趣的话，请继续往下阅读，并且随时关注后续的更新。(^_^)

什么是网格布局？

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

早前在 CSS 中并没有内置的网格系统，但对于设计师和前端开发者言，对网格系统并不会感到陌生。因为设计师和前端开发者都熟悉（或有使用过）网格系统：

从上图中不难发现，一个网格有着它自己独特的特性和具备的属性，比如一个网格通常具有许多的 列（column） 与 行（row），以及行与列、列与列之间的间距，也称 沟槽（gutter）。

随着技术不断的革新，CSS 也具有内置的网格系统，要比使用各种次优化方法创建的网格状的设计更强，而且具备二维布局能力：

CSS 内置的网格系统除了是一个具有二维布局的系统之外，还具有以下这些特点：

• 固定的和弹性的轨道（行或列）尺寸：可以使用固定的轨道尺寸创建网格，比如我们熟悉的固定单位px；也可以使用像百分比（%）或者网格系统中独有的<flex>单位（fr）创建具有弹性尺寸的网格；也可以两者相互结合来创建网格
• 元素（网格项）放置：可以使用网络线的数字索引号或网络线名称或者网格区域来精确定位元素（网格项）。网格同时还使用一种算法来控制未给出明确网格位置的元素（网格项）；使用网格线或网格区域放置网格项，可以在不改变 HTML 源顺序的前提下满足不同位置的布局需求
• 创建额外的轨道（行或列）来放置元素（网格项）：可以使用网格布局定义一个显式网格，但是根据规范它会处理你加在网格外面的内容，当必要时它会自增加网格轨道（行或列），来尽可能多的容纳所有的网格项（创建一个隐式网格）
• 对齐控制：网格布局系统中也涵盖了对齐（Box Alignment）模块的部分特性，便于我们控制网格项目放入网格区域后如何对齐，以及整个网格的对齐方式
• 控制重叠内容：一个网格单元或区域中可以放置多个项目，并且它们可以部分地相互重叠，而且我们可以通过 z-index 属性来控制它的层级权重
• 网格的嵌套（子网格）：网格布局和早期的表格布局非常的类似，在网格布局中还可以使用网格嵌套网格，甚至还可以使用子网格或者display:contents 构建网格的嵌套
• 网格顺序：在网格布局中，除了通过网格线或网格区域来调整网格顺序之外，还可以像 Flexbox 布局中一样，使用 order 属性来调整网格项的排列顺序（不需要调整 HTML 的源码）

这里可能提到一些网格布局中的专业或独有的术语，如果你觉得陌生的话，不用过于担心，随着你继续往下阅读，你会知道这些术语所表达的含义以及其在网格布局中所起的作用。

为什么要使用网格布局？

在详细介绍 CSS 网格布局相关的特性之前，先简单看看网格布局试图解决什么问题。W3C 规范中有这样的一段描述：

CSS grid layout provides a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors.

大致意思是，CSS 网格布局为开发者提供了一种机制，使用一组可预测的大小行为，将可用空间划分为行和列，用于布局。

虽然与使用浮动（float）或定位（position）布局技巧相比，Flexbox 布局更灵活，也更易于操作，但 CSS 网格布局允许以网格格式对布局进行更精细的控制。那些设计原型或使用 CSS 网格框架的人多年来已经习惯了这种模式。

W3C 规范还解释了 CSS 网格布局的另一个好处：

Grid Layout allows dramatic transformations in visual layout structure without requiring corresponding markup changes.

即，CSS 网格布局允许在视觉布局结构上进行戏剧性的变换，而不需要调整相应的 HTML 结构。

CSS 网格布局使得项目（网格项目）很容易重叠，并且具有类似表格布局中的合并单元格、表格嵌套表格等功能。而且最重要的是，网格布局可以让你用最少的代码轻易构建常见的设计，比如圣杯布局，两列等高布局等。

重要术语

前面提到过，CSS 内置的网格布局中的术语要比 CSS 网格框架中的术语还要更多，要深入了解和掌握 CSS 网格布局的话，理解这些术语就显得尤其重要。这里涉及到的术语在概念上都挺相似的，如果不先记住 CSS Grid 规范所定义的含义会很把些术语（概念）搞混淆。不过不用过于担心，为了帮助大家更好的理解这些术语，接下来我们尽可能的用较为清晰的图来帮助大家理解。

下面 HTML 将会是接下示例中使用到的：

<!-- HTML -->
<div class="grid__container">
    <div class="grid__item"></div>
    <!-- 这里省略一些 -->
    <div class="grid__item"></div>
</div>

如果无特殊说明，接下来的示例都将采用上面展示的 HTML 结构来构建 Demo。

网格轴

在 CSS 的 Flexbox 布局中，有 主轴（Main Axis） 和 侧轴（Cross Axis），它们和 flex-direction 有着直接关系：