Grid佈局詳解

　　什麼是Grid佈局?Gird爲網格的意思,顧名思義就是讓你的頁面佈局像一個網格同樣,把對應的組件一個個的放到你想放入的位置裏面.Grid佈局的優點在於他是一個基於網格的佈局系統,能夠運用行與列的來設計每一個組件的位置與大小,與其它佈局相對來講可以更加的方便與靈活.

　　怎麼設置爲網格佈局呢?很簡單,只需在html裏面須要先設置一個父元素(網格容器)來包括全部的子元素,設置爲Grid佈局只須要在其父元素中聲明display:grid/inlinegird便可,此時網格容器的全部直接子節點都自動成爲網格項.例如: 

HTML代碼:

 1 <div class="container">
 2   <div class="item">1</div>
 3   <div class="item">2</div>
 4   <div class="item">3</div>
 5 </div>

CSS代碼:

.container {
  display: grid/inline-gird;
}

(ps:值得一提的是若是設置爲grid佈局的話,父元素的寬度默認爲全屏,高度自適應,但若是是inline-grid的話則是寬高所有自適應.除非你指定了寬高)

　grid-gap

　　可能你的界面會是這樣的:　　　　　　　　　　　　　　　　　　　　　　

　　所有元素都牢牢的擠在一塊兒,看起來十分的不美觀,這時候你可使用 grid-gap:10px 來使每一個元素之間相距10px的間隙,以下圖所示:

　　你也可使用 grid-column-gap/grid-row-gap 來分別使列與行之間的間隙.

　grid-column-start/end 與 gird-row-start/end:

　　先來看看網格線的概念,下面的Line 1分別表明了第一行/列網格線,其它Line x同上.

　

　　使用如下代碼 .item1{ grid-column-start:1; grid-column-end: 3; } 能夠達到如下效果:

 

 　　grid-column-start 是規定改元素的列起始基線處於哪一個網格線,grid-column-end 是規定改元素的結束基線處於哪一個網格線,這樣作能夠將某個元素所佔的空間給增大. 而 grid-row-start/end 則上面的功能相同,只不過改變的是行而已.

　grid-template-columns/rows:

　　 grid-template-columns: 100px 200px 100px; 設置每列元素的寬度,是用改屬性後明顯第2列要比其它兩列寬兩倍.若是是 grid-template-rows: 100px 200px 100px; 的話則是改變行間的高度,大家能夠本身試試.

 

一口氣寫無缺累,抱歉,剩下的內容後面補上