上篇介绍了网格容器、网格轨道的相关属性使用方法，如果您还不熟悉网格，建议先去看看之前的文章前端入门——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
position:fixed 的元素脱离了文档流,不占据文档流的空间，这时 top、right、left、bottom 是根据 窗口 为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移
那么我们如何设置 position:fixed 的元素居中呢？
如果我们这么做：
效果如下：
fixed 的元素的 左上角 居中了，但是我们要的是整个元素居中啊，怎么办呢
设置 margin-top 和 margin-left 分别为高度和宽度的一半的负值。
这样就居中了，效果如下
这么做的前提是你知道元素的宽度和高度，如果不知道宽高呢？
没关系
The translate value for transform is based off the size of the element, so that will center nicely.
tarmsform 属性的 translate 值是基于元素的大小，所以可以完美的居中啦~
ps： 如果只需要水平居中：
https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
