place-content
该属性可以让align-content和justify-content属性缩写在一个CSS声明中 语法：
// 由于兼容性问题， 不建议合在一起 place-items: <align-content> / <justify-content>
网格间隙
每列/行之间的间隙被称为间隙
.grid-container { display: grid; // 网格布局 grid-column-gap: 50px; // 列间距50px grid-row-gap: 10px; // 行间距10px grid-gap: 10px 50px ; // 分别设置行间距10px, 列间距50px }
网格线
列之间的线被称为列线。
行之间的线被称为行线。
示例
放置在列线1的网格项目，并让它结束对列线3。
可能取值：
grid-column-start: <number> | <name> | span <number> | span <name> | auto
：起止于第几条网格线。
：自定义的网格线的名称。
span ：当前网格会自动跨越指定的网格数量。
span ：当前网格会自动扩展，直到命中指定的网格线名称。
auto：全自动，包括定位，跨度等。
.item1 { grid-column-start: 1; grid-column-end: 3; }
同理放在在排线(行线)1的网格项目，并让它结束对排线3
.item1 { grid-row-start: 1; grid-row-end: 3; }
grid-column（grid-column-start + grid-column-end）属性定义在其上的列（多个）放置的一个项目
可能取值：
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
eg:让item1在1号线开始和3号线结束：
.item1 { grid-column: 1 / 3; }
eg:让item1开始在1号线开始和跨度3列结束：
.item1 { grid-column: 1 / span 3; }
eg:让item1开始在2号线开始和跨度2列结束：
.item1 { grid-column: 2 / span 3; }
grid-row（grid-row-start + grid-row-end）属性定义哪一行放置一个项目
可能取值及原理同grid-column
