grid布局学习二之子元素（项目）

 /*  grid-column-start属性：左边框所在的垂直网格线
     grid-column-end属性：右边框所在的垂直网格线
     grid-row-start属性：上边框所在的水平网格线
     grid-row-end属性：下边框所在的水平网格线
     使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序

     grid-row-start:span 2;左右边框（上下边框）之间跨越多少个网格
     grid-row-start: 1;
     grid-row-end: 3;
     grid-column-start: 1;
     grid-column-end: 3;
     z-index: 10;
 */    

 /*  grid-column属性是grid-column-start和grid-column-end的合并简写形式，
     grid-row属性是grid-row-start属性和grid-row-end的合并简写形式

     grid-column: 1 / 3;
     grid-row: 1 / 2;
     grid-row: 1 / span 2;    //占据两个格子
     grid-column: 1 / span 2;    //同上
     grid-row: 1;    //斜杠以及后面的部分可以省略，默认跨越一个网格
 */

 /*  grid-area属性指定项目放在哪一个区域。
     grid-area: e;    //同grid-template-areas

     grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
     grid-area: 1 / 1 / 3 / 3;
 */

 /*  justify-self属性设置单元格内容的水平位置（左中右），
     跟justify-items属性的用法完全一致，但只作用于单个项目。
     justify-self: start | end | center | stretch;

     align-self属性设置单元格内容的垂直位置（上中下），
     跟align-items属性的用法完全一致，也是只作用于单个项目。
     align-self: start | end | center | stretch;

     place-self属性是align-self属性和justify-self属性的合并简写形式。
     place-self: <align-self> <justify-self>;
     place-self: center center;

     start：对齐单元格的起始边缘。
     end：对齐单元格的结束边缘。
     center：单元格内部居中。
     stretch：拉伸，占满单元格的整个宽度（默认值）
 * */

 /*参考链接 阮一峰 http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html    */