前言
继flex布局被广泛应用后，grid布局开始在各大浏览器中被支持。所以开始了对grid布局的初步学习。 顾名思义，grid（网格布局）是将布局划分成网状图去分布。而可以想象的是，一个网格具备的属性会包括网格线、网格单元、网格区域、行、列这些属性。下面我们先全面的了解一下网格布局的一些术语。
网格布局中的术语
网格容器
和弹性布局一样，网格布局也有一个容器去包含要布局的内容，也是在这个容器上去设置网格布局。
网格项
网格容器的直接子项，可以在子项里设置他们在容器中的位置大小等等。
网格线
用来把网格容器划分成一个个网格单元。虽说是线的概念，但实际呈现方式是以空白区域的形式。
网格轨道
简单理解为行列，指相邻网格线间的空间。
网格单元格
被网格线划分成的每一个格子。
网格区域
多个网格单元格组成的一个区域
网格布局中的属性总览
网格容器的属性
- display
- grid-template-columns / grid-template-rows / grid-template-areas / grid-template
- grid-column-gap / grid-rows-gap / grid-gap
- justify-items / align-items / place-items
- justify-content / align-content / place-content
- grid-auto-columns / grid-auto-rows / grid-auto-flow
- grid
网格项的属性
- grid-column-start / grid-column-end / grid-row-start / grid-row-end
- grid-column / grid-row / grid-area
- justify-self / align-self / place-self
网格容器属性详解
1.display：grid / inline-grid 将元素设置成grid布局的上下文 2.grid-template-columns / grid-template-rows 取值：[line-name] <track-size> ... 使用空格来分割值，空格可看做网格线帮助理解记忆。起名的话名字要放在“[]”中，可以包含多个名称用空格分开。track-size的值可以是长度、百分比、或者等分（fr为单位）容器中的可用空间。 可以用repeat简化重复，示例： grid-template-columns: repeat(3, 20px [col-start]); 3.grid-template-areas / grid-template grid-template-areas为划分好的网格划分区域，可供grid-area引用。用“.”代表一个网格单元，为每个网格单元命名，同名的则链接成一个区域。 grid-template是简写属性，grid-template：none | <grid-template-rows> / <grid-template-rows> 4.grid-column-gap / grid-row-gap / grid-gap 指定网格的间隙（网格线）大小，取值是长度。grid-column-gap和grid-row-gap将重名为没有grid-前缀的属性。 5.justify-items / align-items / place-items 设置网格容器中的网格项在其网格单元中的对齐方式。 取值：start | end | center | stretch 6.justify-content / align-content / place-content 设置网格在网格容器中的对齐方式。 取值范围：start | end | center | space-around | space-between | space-evenly 其中比flex多了一个取值space-evenly，意思是把网格两边放置的空白区域和网格之间的空白区域一样大。 7.grid-auto-columns / grid-auto-rows 取值：长度、百分比、fr单位 指定自动生成的网格轨道的大小（通过隐式生成的网格轨道）。 例子：网格容器定义了2*2网格布局，网格项分布在第一行第一个和第一行第四个单元时，中间便会产生隐式轨道。 8.grid-auto-flow 定义没有明确网格放置位置的网格项的放置方式。取值为：row | column | dense dense代表告诉布局算法在稍后出现较小的网格项时，尝试填充网格中较早的空缺。dense会造成排序的乱序，不利可视化和访问性。 9.grid 所有属性的集合，简写方式。
子元素 网格项的属性解析
前言：float、display：inline-block / table-cell、vertical-align、column-*属性对网格项无效。
1.grid-column-start / grid-column-end / grid-row-start / grid-row-end 通过指定四条网格线形成一个密闭区域作为网格项在网格容器中的位置。 取值：网格线的编号或名称 | span <number> | span <name> | auto span <number> | span <name> 代表网格项的跨度 auto 代表自动放置，自动跨度,默认会扩展一个网络轨道的宽度或者高度 2.grid-column / grid-row 简写方式，每个属性接收两个值，中间用”/“隔开，分表代表开始结束，值和上一点一致。 3.grid-area 为网格项的位置提供一个区域引用。取值可以是网格容器中grid-template-area存在的区域名，也可以是用”/“分开的四条网格线。 4.justify-self / align-self / place-self 设置自身网格项在网格位置中布局方式。 取值：start | end | center | stretch
其他：grid也有部分属性支持动画，但暂未全部支持。
参考文献：https://www.css88.com/archives/8510 CSS Grid 布局完全指南(图解 Grid 详细教程)