什麼是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; 的話則是改變行間的高度,你們可以自己試試.

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