声明容器
display: grid;或display: inline-grid;或display: subgrid;。grid 和 inline-grid 很好理解就是块级网格及行内块级网格。subgrid 是用来定义子网格，子网格会继承父网格的一系列规格。
划分容器
定义横、纵网格轨道。此处我们尝试定义一个4 * 4的网格。
123456
.grid { display: grid; grid-template-columns: 60px 60px 60px 60px; grid-template-rows: 60px 60px 60px 60px; grid-gap: 5px;}.grid > div { background: grey; /*大家不要被下面的代码迷惑，只是为了好看，哈哈*/ display: flex; color: #fff; font-size: 150%; justify-content: center; align-items: center;} 
grid-template-columns
grid-template-columns用来定义网格列的宽度既轨道宽度，代码表示将容器划分为4列，列的宽度都为60px，宽度可以随意的更改。
grid-template-rows
grid-template-rows用来定义网格行的高度，代码表示将容器划分4个行。通过以上两行代码就实现了4 * 4的网格划分了。不信，增加几个div数试一下。
grid-gap用来控制网格的间距的，准确地说是用来控制网格区域的间距。
控制项目
到目前为止，我们的 css 好像都作用在了容器上，那么如何来点儿高级的东西呢？
123456
.grid { display: grid; grid-template-columns: 60px 60px 60px 60px; grid-template-rows: 60px 60px 60px 60px; grid-gap: 5px;}.grid > div { background: grey; /*大家不要被下面的代码迷惑，只是为了好看，哈哈*/ display: flex; color: #fff; font-size: 150%; justify-content: center; align-items: center;}.item1 { grid-column-start: 4; grid-row-start: 2;}.item2 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3;}.item3 { grid-column: -1 / -2; grid-row: 1 / 2;}.item4 { grid-column: 1 / span 2; grid-row: -1 / -3;}.item5 { grid-area: -1 / 3 / -3 / 4;}.item6 { grid-area: -1 / 5 / -3 / 4;} 
我们在中讨论过，网格线是有编号的1、2、3、4...。要控制网格区域的位置就需要依赖于这这些网格线。下面通过5个例子讲解如何通过控制网格线来实现区域的定位及单元格合并。
grid-column-start & grid-row-start
grid-column-start grid-row-start用来控制区域的列开始和行开始的位置，请注意这里我们并没有给出 grid-column-end和grid-row-end的值，他们的默认值可以简单理解为 start 的值加一。其实这里有个span的概念。
.item1 { grid-column-start: 4; grid-row-start: 2;} grid-column-end& grid-row-end
有开始肯定就有结束，grid-column-end，grid-row-end是用来控制区域结束位置。这里有个知识点需要大家记住，✍️end 的值是可以小余 start 的值的，不信你试试。还有grid-column-start、grid-column-end、grid-row-start、grid-row-end 的值都可以取负数的，负数意味着从后往前数✍️。
.item2 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3;} grid-column & grid-row
grid 的相关属性这么多，肯定会有简写。grid-column是grid-column-start 和grid-column-end的简写。grid-row同理。
.item3 { grid-column: -1 / -2; grid-row: 1 / 2;}// 等价于.item3 { grid-column-start: -1; grid-column-end: -2; grid-row-start: 1; grid-row-end: 2;} span
span表示横跨几个单元格。功能就是当你你不愿意一直数数时，就可以使用span。下面向大家展示区域定义的4种写法。
.item4 { /* 1 */ grid-column: 1 / span 2; /* 2 */ grid-column: span 2 / 3; /* 3 */ grid-column-start: 1; grid-column-end: span 2; /* 4 */ grid-column-start: span 2; grid-column-end: 3; /*row 也一样的*/ grid-row: -1 / -3;} grid-area
grid-area是grid-row和grid-column的简写。顺序是grid-row-start，grid-column-start，grid-row-end，grid-column-end。
.item5 { grid-area: -1 / 3 / -3 / 4;}// 等同于.item { grid-row-start: -1; grid-row-end: -3; grid-column-start: 3; grid-column-end: 4;} 此处留一个思考题：grid-area 里面可以使用 span 吗？?
总结
本文希望大家可以掌握定义容器和轨道的方法和划分网格区域的n种写法。
推荐大家到上练习一下，加深对 grid属性的记忆。grid概念理解完之后就是考验大家的记忆功力了。
欢迎大家指正批评、或留言。QQ群：538631558