grid布局速记
grid布局效果总览
容器属性
grid-template-rows
gird-template-columns
grid-template-areas
grid-auto-rows: 对未设置行高的网格设置默认高度，grid-template-rows可覆盖
grid-auto-columns: 对未设置行宽的网格设置默认宽度，grid-template-columns可覆盖
gird-auto-flow: 设置网格的流向，是按行排列，还是按列排列，还是其他
grid-column-gap
grid-row-gap
justify-items 单元格内的水平位置，设置的是网格项的位置，就是网格的直接子元素，是我们的目标元素，items通常指的就是网格项，如果网格项中包含多个元素，
其布局取决于网格项的布局，若网格项使用display:flex, 则其内多个元素按flex布局，所以网格项位置居中，并不代表其内部的所有元素位置都居中
align-items 单元格内的垂直位置，设置的是网格项的位置
place-items 是jusify-items和align-items的合并简写，place-items: auto center;
justify-content 网格在容器内面的水平位置，1. center值会是非定宽(auto,fr)网格收缩, 不收缩时候网格是撑满容器的 2. 在容器大于网格面积的时候，调整网格在容器中的位置
align-content 网格在容器内的垂直位置
place-content justify-content和align-content的合并简写
grid-template: 简写 grid columns, rows, and areas.
grid-gap: 简写 <row-gap> <column-gap>
grid 简写 所有属性，grid: 'area' 是快速写单个area的简便写法
常用简写:
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template:
"a a ." minmax(50px, auto)
"a a ." 80px
"b b c" auto / 2em 3em auto;
grid: repeat(2, 60px) / auto-flow 80px;
子项属性
grid-row
gird-column
grid-area
justify-self
align-self
gird-row-start
grid-row-end
grid-column-start
grid-column-end
详细用法参考：
