grid佈局學習二之子元素（項目）

 1 /*  grid-column-start屬性：左邊框所在的垂直網格線
 2     grid-column-end屬性：右邊框所在的垂直網格線
 3     grid-row-start屬性：上邊框所在的水平網格線
 4     grid-row-end屬性：下邊框所在的水平網格線
 5     使用這四個屬性，若是產生了項目的重疊，則使用z-index屬性指定項目的重疊順序
 6     
 7     grid-row-start:span 2;左右邊框（上下邊框）之間跨越多少個網格
 8     grid-row-start: 1;
 9     grid-row-end: 3;
10     grid-column-start: 1;
11     grid-column-end: 3;
12     z-index: 10;
13 */    
14     
15 /*  grid-column屬性是grid-column-start和grid-column-end的合併簡寫形式，
16     grid-row屬性是grid-row-start屬性和grid-row-end的合併簡寫形式
17     
18     grid-column: 1 / 3;
19     grid-row: 1 / 2;
20     grid-row: 1 / span 2;    //佔據兩個格子
21     grid-column: 1 / span 2;    //同上
22     grid-row: 1;    //斜槓以及後面的部分能夠省略，默認跨越一個網格
23 */
24     
25 /*  grid-area屬性指定項目放在哪個區域。
26     grid-area: e;    //同grid-template-areas
27     
28     
29     grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
30     grid-area: 1 / 1 / 3 / 3;
31 */
32 
33 /*  justify-self屬性設置單元格內容的水平位置（左中右），
34     跟justify-items屬性的用法徹底一致，但只做用於單個項目。
35     justify-self: start | end | center | stretch;
36      
37     align-self屬性設置單元格內容的垂直位置（上中下），
38     跟align-items屬性的用法徹底一致，也是隻做用於單個項目。
39     align-self: start | end | center | stretch;
40     
41     place-self屬性是align-self屬性和justify-self屬性的合併簡寫形式。
42     place-self: <align-self> <justify-self>;
43     place-self: center center;
44     
45     start：對齊單元格的起始邊緣。
46     end：對齊單元格的結束邊緣。
47     center：單元格內部居中。
48     stretch：拉伸，佔滿單元格的整個寬度（默認值）
49 * */
50 
51 /*參考連接 阮一峯 http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html    */