grid-template-colimns（列） 和 grid-template-rows（行）
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及 fr 单位（网格剩余空间比例单位）。
有时候，我们网格的划分是很规律的，如果需要添加多个纵横网格时，可以利用 repeat()语法进行简化操作。
repeat（重复的次数，大小）：frid-template-rows：（3，1fr）
grid0template-ares 和 grid-template
area 是区域的意思，grid-template-area 就是给我们的网格划分区域的。此时 grid 子项只要使用
grid-area 属性指定其隶属于哪个区
grid-template 是 grid-template-rows ， grid-template-columns 和 grid-template-areas 属性的缩写。
grid-column-gap 和 grid-row-gap
grid-column-gap 和 grid-row-gap 属性用来定义网格中间网格间隙的尺寸
CSS grid-gap 属性是grid-column-gap 和 grid-row-gap 属性的缩写（横向，纵向）
justify-items 和 align-items
justify-items 指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐
algin-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐
place-items 可以让 align-items 和 justify-items 属性写在单个声明中。
取值（纵向 横向）
stretch 默认值，拉伸。表现为水平或垂直填充
start 表现为在容器左侧或顶部对齐
end 表现为容器右侧或底部对齐
center 表现为水平或垂直居中对齐
justify-content 和 align-content
justify-content 指定了网格元素的水平分布方式。algin-content 指定了网格元素的垂直分布方式
place-content 可以让 align-content 和 justify-content 属性写在一个CSS声明中。
取值
stretch 默认值，拉伸。表现为水平或填充。
start 表现为容器左侧或顶部对齐
end 表现为容器右侧或底部对齐
center 表现为水平或垂直居中对齐
space-between 表现为两端对齐
space-around 享有独立不重叠的空白空间
space-evenly 平均分配空白空间
原文：https://www.cnblogs.com/moodblog/p/14342971.html