CSS 之Grid 網格知識梳理2

繼上篇的CSS 之Grid下半部分

    14.將單元格劃分到一個區域，使用grid-template-areas屬性；

         ag: grid-template-areas:

                     "header  header  header"

                     "advert  content  content"

                     "footer  footer  footer";

          上段代碼中，每一個單詞表明一個單元格，每對引號表明一行（當想讓指定單元格爲空時，使用「.」（點號）表示）

  15.引用給定的名稱將項放入到自定義區域中：grid-area屬性實現；

      ag：

 1 <div class="container">
 2   <div class="item1">1</div>
 3   <div class="item2">2</div>
 4   <div class="item3">3</div>
 5   <div class="item4">4</div>
 6   <div class="item5">5</div>
 7 </div>
 8 
 9 
10 <style>
11   .item1{background:LightSkyBlue;}
12   .item2{background:LightSalmon;}
13   .item3{background:PaleTurquoise;}
14   .item4{background:LightPink;}
15   
16   .item5 {
17     background: PaleGreen;
18     
19      grid-area:footer;  //將item5劃分到頁尾；
20 
21   }
22   
23   .container {
24     font-size: 40px;
25     min-height: 300px;
26     width: 100%;
27     background: LightGray;
28     display: grid;
29     grid-template-columns: 1fr 1fr 1fr;
30     grid-template-rows: 1fr 1fr 1fr;
31     grid-gap: 10px;
32     grid-template-areas: 
33       "header header header"
34       "advert content content"
35       "footer footer footer";
36   }
37 </style>

前面爲未添加「grid-area」代碼的效果圖，後圖爲添加了「grid-area」值的效果以下：

           

 

 16.在15點的基礎上，知道了將指定單元格放入到指定區域中，先將未劃分的區域放入到指定的區域中，仍舊使用grid-area屬性，改變其值便可；

    該屬性的接收值爲：grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

                                 （grid-area:水平方向開始線/垂直方向開始線/水平方向結束線/垂直方向結束線）；

    ag:

 1 <div class="container">
 2   <div class="item1">1</div>
 3   <div class="item2">2</div>
 4   <div class="item3">3</div>
 5   <div class="item4">4</div>
 6   <div class="item5">5</div>
 7 </div>
 8 
 9 
10 <style>
11   .item1{background:LightSkyBlue;}
12   .item2{background:LightSalmon;}
13   .item3{background:PaleTurquoise;}
14   .item4{background:LightPink;}
15   
16   .item5 {
17     background: PaleGreen;
18    grid-area:3/1/4/4;   //從水平第三條線即第三行，垂直方向第一條線到第四條線，即第三列效果
19   }
20   
21   .container {
22     font-size: 40px;
23     min-height: 300px;
24     width: 100%;
25     background: LightGray;
26     display: grid;
27     grid-template-columns: 1fr 1fr 1fr;
28     grid-template-rows: 1fr 1fr 1fr;
29     grid-gap: 10px;
30   }
31 </style>

  效果以下：

      

 

 實現了與14點一致的效果；

17.當須要寬度/高度一致且行數/列數較多時，使用repeat函數可達到目的並且可減小重複的代碼數；

      A.列數;grid-template-columns:repeat(列數，列高度);

      B.行數：grid-template-rows:repeat(2,1fr 50px) 20px);   //做用與「grid-template-columns: 1fr 50px 1fr 50px 20px;」一致；

 

18.使用minmax函數限制單元格的尺寸；（在網格容器更改大小時限制，即爲項目指定可接受的範圍）

    ag：

grid-template-columns:20px minmax(90px,200px);//指定了2列，一列200px.一列限制在90px-200px;

19.使用自動填充建立靈活的佈局：auto-fill屬性；

       repeat函數附帶一個名爲自動填充的選項。這容許您根據容器的大小自動插入儘量多的所需大小的行或列。您能夠在組合au時建立靈活的佈局;

   ag:

 1 <div class="container">
 2   <div class="item1">1</div>
 3   <div class="item2">2</div>
 4   <div class="item3">3</div>
 5   <div class="item4">4</div>
 6   <div class="item5">5</div>
 7 </div>
 8 <div class="container2">
 9   <div class="item1">1</div>
10   <div class="item2">2</div>
11   <div class="item3">3</div>
12   <div class="item4">4</div>
13   <div class="item5">5</div>
14 </div>
15 
16 
17 <style>
18   .item1{background:LightSkyBlue;}
19   .item2{background:LightSalmon;}
20   .item3{background:PaleTurquoise;}
21   .item4{background:LightPink;}
22   .item5{background:PaleGreen;}
23   
24   .container {
25     font-size: 40px;
26     min-height: 100px;
27     width: 100%;
28     background: LightGray;
29     display: grid;
30 
31     
32     grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));//實現當可視界面自動填充
33     
34    
35     grid-template-rows: 1fr 1fr 1fr;
36     grid-gap: 10px;
37   }
38   
39   .container2 {
40     font-size: 40px;
41     min-height: 100px;
42     width: 100%;
43     background: Silver;
44     display: grid;
45     grid-template-columns: repeat(3, minmax(60px, 1fr));
46     grid-template-rows: 1fr 1fr 1fr;
47     grid-gap: 10px;
48   }
49 </style>

 

20.使用自動適應建立靈活佈局：auto-fit屬性實現；（用法同auto-fill一致）

 

21.使用媒體查詢建立響應式佈局；

  

1 @media (min-width；400px){
2     .container{
3         grid-template-area:
4             "header  header"
5             "advert content "
6             "footer  footer ";
7     }
8 }   //當可視界面 >400px，header佔據頁眉，footer佔據也尾，advert佔據左列

添加了如上代碼先後效果對比圖以下：

         

 

 

 22.將直系後代轉化爲網格，網格中就有了網格；

        在後代元素中，改變其display:grid以後，grid-template-columns等設置便可；