CSS 之Grid網格大體知識梳理1

CSS所提供的關於網格Grid屬性讓咱們能夠更方便編寫頁面以及佈局，而它的一些主要應用屬性以下：

1.將父容器的display屬性值設置爲grid 便可將其轉換爲網格容器；

2.在網格容器中添加列的屬性：grid-template-columns;

         ag：

 1 <div class="container">
 2   <div class="d1">1</div>
 3   <div class="d2">2</div>
 4   <div class="d3">3</div>
 5   <div class="d4">4</div>
 6   <div class="d5">5</div>
 7 </div>
 8 
 9 
10 
11 
12 <style>
13   .d1{background:LightSkyBlue;}
14   .d2{background:LightSalmon;}
15   .d3{background:PaleTurquoise;}
16   .d4{background:LightPink;}
17   .d5{background:PaleGreen;}
18   
19   .container {
20     font-size: 40px;
21     width: 100%;
22     background: LightGray;
23     display: grid;
24     /* add your code below this line */
25   grid-template-columns:100px 100px 100px;
26     
27     /* add your code above this line */
28   }
29 </style>

效果：

 

 3.在網格容器中添加行的屬性：grid-template-rows;(用法與添加列的方法一致)；

4.改變行/列尺寸的單位有：fr :可用區域；auto:自定義尺寸；  xxpx:具體的px值；

5.建立空白列寬（列間隙）：grid-columns-gap；

     ag:以上同一個栗子，修改其父元素contain的屬性，代碼以下：

        

 1 .container {
 2     font-size: 40px;
 3     min-height: 300px;
 4     width: 100%;
 5     background: LightGray;
 6     display: grid;
 7     grid-template-columns: 1fr 1fr 1fr;
 8     grid-template-rows: 1fr 1fr 1fr;
 9    
10     grid-column-gap:20px;     //列寬20px;
11 
12   }

效果以下：

 

 6.建立行間隙：grid-row-gap;(用法同添加列間隙一致)；

7.由5,6條綜合，爲了更方便的建立行間距與列間隙（快捷方式）：grid-gap屬性；

8.改變一個網格中的一個方格佔據的列寬：grid-column;該屬性的工做原理：如下的表格中列從左往右數，行從上往下數；

 

 

     仍是以上的栗子，改變其item5的樣式：

1 .item5 {
2     background: PaleGreen;
3    
4     grid-column:2/4;  //從第二條列間隙—第四條，即從第二列到第三列
5     
6   }

效果以下：

 

 

9.改變一個方格的佔據行高：grid-row屬性；（原理同上）；

10.單元格與單元格對齊的屬性設置：justify-self；

        該屬性接收如下參數：stretch:默認填充整個單元格；  start：左對齊；  center:居中對齊；  end:右對齊；

11.單元格與單元格垂直方向對齊設置：align-self屬性；（接受的值與垂直方向一致）

12.水平方向上對齊全部的項：justify-items;(接收參數與以上對齊屬性接收的值一致）；

13.垂直方向上對齊全部的項的屬性;align-items;(接收參數與以上對齊屬性接收的值一致）；