css之grid layout代码解释

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