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    */

 

转载于:https://www.cnblogs.com/jay-sans/p/10757211.html