grid

   grid-template-columns :设置宽 repeat(次数,宽度) auto-fill关键字表示自动填充
   grid-template-rows: 设置高
   grid-template-areas:  网别名
   grid-rows-gap:列间距
   grid-columns-gap:行间距
   grid-gap: 行列间距 合并
   grid-auto-flow:  默认row  行排列  column竖排列
   justify-items:（左中右）  start end  center  stretch（拉伸,默认）
   align-items:(上中下)      start end  center  stretch（拉伸,默认）
   place-items: <align-items> <justify-items> 简写
   justify-content: start end  center  stretch(拉伸占据整个网格容器) space-around(项目两侧的间隔相等,边框小一倍) space-between(项目与项目的间隔相等，项目与容器边框之间没有间隔) space-evenly(项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔)
   align-content:start end  center  stretch(拉伸占据整个网格容器) space-around(项目两侧的间隔相等,边框小一倍) space-between(项目与项目的间隔相等，项目与容器边框之间没有间隔) space-evenly(项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔)
   place-content <align-content>  <justify-content> 
   grid-auto-columns/grid-auto-rows 设置宽高
   grid-template  <grid-template-columns> <grid-template-rows> <grid-template-areas> 组合
   grid <grid-template-rows> <grid-template-columns> <grid-template-areas>  <grid-auto-rows> <grid-auto-columns> <grid-auto-flow>  组合
   grid-column-start属性：左边框所在的垂直网格线（从左线数） 可指定为网格线的名字 span关键字 站几个格子 重叠用z-index
   grid-column-end属性：右边框所在的垂直网格线 可指定为网格线的名字
   grid-row-start属性：上边框所在的水平网格线（从上线数） 可指定为网格线的名字
   grid-row-end属性：下边框所在的水平网格线 可指定为网格线的名字    
   grid-column <grid-column-start> /<grid-column-end> 合并
   grid-row <grid-row-start>/ <grid-row-end> 合并
   grid-column: 1 / 3; == grid-column-start: 1;  grid-column-end: 3;    
   grid-row: 1 / 2; == grid-row-start: 1;  grid-row-end: 2;
   grid-area: <row-start> / <column-start> / <row-end> / <column-end>; 组合(列行)  grid-area: 1 / 1 / 3 / 3;
   justify-self:（子类左中右）  start end  center  stretch（拉伸,默认）
   align-self:(子类上中下)      start end  center  stretch（拉伸,默认）
   place-self: <align-self> <justify-self> 简写