Gird Layout代码解释

Posted 2021-01-09 lan-yu

1 <div class="wrapper">    <!--定义一个类名为wrapper的div盒子-->
2   <div class="one">One</div>  <!--定义一个类名为one的div盒子-->
3  <div class="two">Two</div> <!-- 定义一个类名为two的div盒子-->
4 <div class="three">Three</div><!--定义一个类名为three的div盒子-->
5  <div class="four">Four</div> <!--定义一个类名为four的div盒子-->  
6 <div class="five">Five</div>  <!--定义一个类名为five的div盒子-->
7   <div class="six">Six</div>  <!-- 定义一个类名为six的div盒子-->
8 </div>

 1 .wrapper {                    /*带有指定类（wrapper）的元素*/
 2   display: grid;               /*定义一个容器属性为网格布局*/
 3   grid-template-columns: repeat(3, 1fr);/*利用空格分隔的值定义网格的列和行。
　　　　　　　　　　　　　　grid-template-columns和grid-template-rows属性来定义网格中的行和列。
　　　　　　　　　　　　　　这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。值的大小代表
　　　　　　　　　　　　　　轨道的大小，并且他们之间的空格表示网格线*/ 
 4  grid-gap: 10px;    /*定义垂直（水平）栏与垂直（水平）栏之间的间距*/
 5 grid-auto-rows: minmax(100px, auto);/*用minmax()作为grid-auto-rows的值。自动创建的行高将会是
　　　　　　　　　　最小100px，最大为auto。 用auto意味着行的尺寸将会根据内容的大小来自动变换。*/
 6 }
 7 .one {
 8   grid-column: 1 / 3;/*设置网格项目列方向的开始位置为1的网格线和结束为3的网格线*/
 9   grid-row: 1;            /*设置网格项目行方向的开始（结束）位置为1的网格线*/
10 }
11 .two { 
12   grid-column: 2 / 4;    /*设置网格项目列方向的开始位置为2的网格线和结束为4的网格线*/
13   grid-row: 1 / 3;        /*设置网格项目行方向的开始位置为1的网格线和结束为3的网格线*/
14 }
15 .three {
16   grid-column: 1;        /*设置网格项目列方向的开始（结束）位置为1的网格线*/
17   grid-row: 2 / 5;        /*设置网格项目行方向的开始位置为2的网格线和结束为5的网格线*/
18 }
19 .four {
20   grid-column: 3;        /*设置网格项目列方向的开始（结束）位置为3的网格线*/
21   grid-row: 3;            /*设置网格项目行方向的开始（结束）位置为3的网格线*/
22 }