css之grid layout代码解释

 1 .wrapper {
 2       display: grid;
 3       grid-template-columns: repeat(3, 1fr);/*grid-template-columns CSS属性定义了网格列的行名称和跟踪大小调整函数。*/
 4       grid-gap: 10px;/*gap CSS属性指定行和列之间的间隙(水槽)。这是行间隔和列间隔的简写。*/
 5       grid-auto-rows: minmax(100px, auto);/*grid-auto-rows CSS属性指定隐含创建的网格行跟踪的大小。*/
 6   
 7         /*repeat() CSS函数表示跟踪列表的重复片段，允许以更紧凑的形式编写大量显示重复模式的列或行。此函数可用于CSS网格属性网格模板列和网格模板行。*/
 8       /*fr 单位是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。*/
 9         /*px是像素单位*/
10   color:red;
11   border: black;
12   /* style */
13 border: solid;
14 
15 /* width | style */
16 border: 2px dotted;
17 
18 /* style | color */
19 border: outset #f33;
20 
21 /* width | style | color */
22 border: medium dashed green;
23 
24 /* Global values */
25 border: inherit;
26 border: initial;
27 border: unset;
28 }
29 .one {
30    grid-column: 1 / 3;/*grid-column CSS属性是grid-column-start和grid-column-end的简写属性，用于指定网格项的大小和在网格列中的位置，
31                          方法是为其网格位置提供一行、一个span或什么(自动)内容，从而指定网格区域的内联-start和内联-end边缘*/
32     grid-row: 1;;/*grid-row CSS属性是网格-行-开始和网格-行-结束指定网格项的大小和位置的简写属性，通过为其网格位置提供一行、一个span或什么(自动)，
33                   从而指定其网格区域的内联-开始和内联-结束边缘*/
34 }
35 .two { 
36  
37   grid-column: 2 / 4;
38   grid-row: 1 / 3;
39 }
40 .three {
41 
42   
43 
44   grid-column: 1;
45   grid-row: 2 / 5;
46 }
47 .four {
48  
49   grid-column: 3;
50   grid-row: 3;
51 }
52 .five {
53   
54   grid-column: 2;
55   grid-row: 4;
56 }
57 .six {
58 
59   grid-column: 3;
60   grid-row: 4;
61 
62 }