上篇介绍了网格容器、网格轨道的相关属性使用方法，如果您还不熟悉网格，建议先去看看之前的文章前端入门——css Grid网格基础知识 ，前端入门——css 网格轨道详细介绍 学习下网格基本知识。

本篇主要介绍网格项的相关属性：

以上四组属性都和网格线密切相关，它们定义了网格项如何根据网格线来定位网格项的位置。

语法如下：

属性值说明：

如下示例：

项目可以相互重叠。您可以使用 z-index 它们来控制它们的堆叠顺序。

上面介绍的grid-column-start / grid-row-start 、grid-column-end/ grid-row-end四个属性还可以使用 grid-row-start 和 grid-row-end 进行简写。

语法：

属性值：

如下示例：

使用此属性可以命名一个网格区域，以便在 grid-template-areas 属性创建的模板中引用此网格区域，或者作为grid-row-start + grid-column-start + grid-row-end + grid-column-end 的更短的简写。

语法如下：

属性值：

如下示例：

为网格区域分配名称的一种方式

作为简写

https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas

https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid

为什么我们需要网格布局？

在我们的Web内容中，可以将其分割成很多个内容块，而这些内容块都占据自己的区域(regions)，可以将这些区域想像成是一个虚拟的网格。到目前为止，在一个模板中使用不同的结构标签，使用多个浮动和手动计算实现一个布局。这对于Web前端人员来说，这是一件痛苦之事。而网格布局将让你摆脱这样的困局，让你的布局方法变得非常简单与清晰。

网格布局给了我们一种方法——创建的结构与使用表格(table)布局并没有什么不同。然而，他是在CSS中实现而不是在HTML中实现，同时还可以依赖于媒体查询根据不同的上下文得新定义布局。这对于喜欢响应式设计的同学来说是一个绝对利好的消息。因为你不在需要再担心你的HTML结构而影响你的布局。

网格布局还可以让我们摆脱现在布局中存在的文档流限制，换句话说，你的结构不需要根据设计稿从上往上布置了。这也意味着您可以自由地更改页面元素位置。这最适合你在不同的断点位置实现你最需要的布局，而不再需要为响应你的设计而担心HTML结构的问题。

什么是CSS Grid　Layout?

CSS Grid Layout是CSS为布局新增的一个模块。网格布局特性主要是针对于Web应用程序的开发者。可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间，或者定义他们的大小、位置以及层级。

就像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。

此外，没有内容结构的网格布局有助于使用流体、调整顺序等技术管理或更改布局。通过结合CSS的媒体查询属性，可以控制网格布局容器和他们的子元素，使用页面的布局根据不同的设备和可用空间调整元素的显示风格与定位，而不需要去改变文档结构的本质内容。

浏览器兼容性

众观下来，仅在IE10+上支持，而且也仅支持部分属性。或许很多同学看到这样的兼容性，又会止步，或者呵呵两声闪人了。不过我们学习是无防，在各浏览器中通过设置可以做测试效果，在下一次中将会向大家介绍如何在浏览器中开启此功能。

Grid　vs Flexbox

在www-list邮件中常常会看到一种Pk的现像：谈到网格就会扯到Flexbox。假设浏览器都支持这两个模块，你将选择grid还是flexbox来给页面布局。其实当你了解两者之后你会很轻松的做出选择。flexbox是一维布局，他只能在一条直线上放置你的内容区块；而grid是一个二维布局。前面也简单说到，你可以根据你的设计需求，将内容区块放置到任何你想要放的地方。那么不用多说，你应该知道哪一种更适合你的布局。

网格术语

想要玩转CSS Grid Layout，就需要先了解网格给我们的一些新术语以及一些CSS属性和值。在这一节中，将简单的向大家解释网格布局中的一些概念与术语。

网格线(Grid Lines)

网格线组成了网格，他是网格的水平和垂直的分界线。一个网格线存在行或列的两侧。我们可以引用它的数目或者定义的网格线名称。

上图突出显示的红线就是第二列的网格线（line2）。

网格轨道(Grid Track)

网格轨道是就是相邻两条网格线之间的空间，就好比表格中行或列。所在在网格中其分为grid column和grid row。每个网格轨道可以设置一个大小，用来控制宽度或高度。

图中突出显示的就是行线line2和line3之间组成的网格轨道。

网格单元格(Grid Cell)

网格单元格是指四条网格线之间的空间。所以它是最小的单位，就像表格中的单元格。

图中突出显示的单元格是由行线line2、line3和列表line2、line3组成的。

网格区域(Grid Area)

网格区域是由任意四条网格线组成的空间，所以他可能包含一个或多个单元格。相当于表格中的合并单元格之后的区域。

图中突出显示的网格区域是行线line1、line3和列线line2、line4之间的区域，其主要包括了四个网格单元格。

网格容器(Grid Containers)

通过使用display属性给元素显式设置了属性值grid或inline-grid，此时这个元素将自动变成网格容器。这个类似于flexbox一样，将元素设置设置为display:flex，元素将自动变成弹性盒模型。

由于网格容器不是块容器，所以有部分属性在网格布局中将会失效：

多列布局模块中的所有column-*属性运用在网格容器上将失效

float和clear使用在网格项目（网格单元格Grid Cell）上将失效

vertical-align使用在网格单元格上将失效

::first-line和::first-letter这样的伪元素不能应用在网格容器上

网格单元格顺序(order)

网格单元格顺序和Flexbox模块一样，通过order属性来对网格单父元格进行顺序重排。

隐式网格是指当网格项目确认在显式网格之外时所创建的网格，简单来说，当没有足够空间或显式网格轨道来分配网格项目时，此时剩下网格会自动创建隐式网格。

当设置网格容器的网格模板 grid-template 属性并指定固定数量轨道时创建出来的就是典型的显式网格，而在实际的HTML中存在网格项目多余既定数量，此时这些多余的网格是之前未声明定义的，因此网格容器会通过添加隐式网格线来生成网格轨道，在将这些多余的网格分配到其中，这些多余的就是所谓“隐式网格”。

隐式网格轨道的尺寸由 grid-auto-rows 和 grid-auto-columns 属性来确定，使用 grid-auto-flow 属性来控制隐式网格自身主动定位（auto-placement），这三个属性都需要在网格容器上设置。

如何产生隐式网格呢？

例如：定义一个网格容器，网格间距为1px，默认存放两列等宽网格项目，创建具有隐式网格的布局。

问题是虽然在网格容器中设置了2列等宽的位置用来容器网格项目，也就是说只定义了1行轨道，但实际上网格容器中具有4个网格项目，问题来了，第3和第4个网格容器是如何处理的呢？

第3和第4会自动创建下一个轨道，即隐藏网格。创建出来的隐式网格的方向若没有设置则默认为 row 即 grid-auto-flow:row 。

这里我们首先将这4个网格分成两种类型显式网格和隐式网格，其中可以发现第1和第2个为显式网格，第3和第4网格为隐式网格。换句话说第1行为显式行轨道，第2行为隐式行轨道。

grid-auto-flow 属性用来设置自动布局算法，用于精确指定在网格中被自动布局的网格项是如何排列的，也就是说指定自动放置的网格项是如何流入网格中的，因此也被称之为“网格自动流”。

稠密堆积算法 VS 稀疏算法

dense 使用稠密堆积算法，若【后面】出现小元素则算法会尝试填充网格中【前面】留下的空白，如此这样会填补上稍大元素所留下的空白，但同时可能导致原有出现次序被打乱。

若省略 dense 则会使用稀疏算法，即在网格中布局元素时，布局算法只会向前移动，永远不会倒回来去填补空白，这样做以保证所有自动布局元素是[按照次序]出现的，即使可能会留下被后面元素填充的空白。

例如：改变隐式网格默认方向 row 为 column ，此时隐式网格行高 grid-auto-rows 将会失效。

网格容器的 grid-auto-rows 属性可以用来定义隐式网格中行轨道的大小

这里 grid-template-rows:70px 设置的是显式轨道的行高， grid-auto-rows:140px 则设置的是隐式轨道的行高。

设置隐式网格列宽，首先需使用 grid-auto-flow:column 自动创建隐式网格流方向为列，然后在使用 grid-auto-columns:1fr 设置隐式网格的列宽，这里使用 1fr 做等分处理。

例如：排序与布局

第1个网格项横跨左2格，后4格按 grid-auto-flow:column 的流向排列。