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 */
浙公网安备 33010602011771号