网格布局代码解释

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--->  <div class="five">Five</div>  <!---一个类名为five的div  --->
6   <div class="six">Six</div>  <!--- 一个类名为six的div--->
7 </div>

 1 .wrapper {                    <!---带有指定类（wrapper）的元素--->
 2   display: grid;                           <!--- 定义使用网格系统--->
 3   grid-template-columns: repeat(3, 1fr);        <!---定义垂直栏--->
 4   grid-gap: 10px;    <!---定义垂直（水平）栏与垂直（水平）栏之间的间距--->
 5   grid-auto-rows: minmax(100px, 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 }
23 .five {
24   grid-column: 2;            <!---单元格的起始栏（结束栏）是2--->
25   grid-row: 4;                <!---单元格的起始行（结束行）是4--->
26 }
27 .six {
28   grid-column: 3;            <!---单元格的起始栏（结束栏）是3--->
29   grid-row: 4;                <!---单元格的起始行（结束行）是4--->
30 }