css grid布局出來很久了，可以翻譯成栅欄布局，或者網格布局，看到了一個很好的應用，是以寫下此篇基礎教程。
比如我們要達到下面這樣一個效果要怎麼做？
圖中有16個元素，我們要其自适應寬度，按照我們以前的想法肯定是直接通過media，媒體查詢來完成這個，但是代碼肯定不會簡潔，但是我們通過grid 布局隻需要幾行代碼!
代碼長這樣：
CSS：
#container { display: grid; grid-gap: 1em; grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr) ) ; }
#container > div { background-color: skyblue; height: 200px; }
HTML：
< div id= "container" > < div >1 </ div > < div >2 </ div > < div >3 </ div > < div >4 </ div > < div >5 </ div > < div >6 </ div > < div >7 </ div > < div >8 </ div > < div >9 </ div > < div >10 </ div > < div >11 </ div > < div >12 </ div > < div >13 </ div > < div >14 </ div > < div >15 </ div > < div >16 </ div > </ div >
container的CSS代碼display: grid;，基礎代碼，将container的布局設定為網格布局。
第二句 grid-gap: 1em;是簡寫： grid-column-gap 和 grid-row-gap的簡寫，顧名思義就是行與行 列與列之間的間距。
第三局 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;。grid-template-columns是顯示網格屬性，我們可以用此屬性來代替flex布局，暫且記住就是處理列的，将一整行分割為多少列，可以使用這個，這句代碼的意思是，一行裡面所劃分多少個單元格的是自适應的（auto-fill），寬度怎麼來定，minmax就是最小值和最大值的寫到一起的并稱，最小值是200px，最大值是 1fr, fr是什麼，是css grid一個新的機關，就可以了解為，将目前水準或者垂直寬度分成多少份的距離，這裡1fr 就是container水準寬度/1的距離了，也就是父元素最大寬度了,但是我們是不能直接将一個元素比如第三個div設定一個寬度，然後你會想到後面的就擠下去了，而是需要給第三個div設定 grid-column: auto / span 2 【這一句代碼就是目前單元格 從任意列開始，将跨2個單元格，水準占據2個單元格的空間，span就有跨越跨度的意思，這和表格裡面的colspan是類似的】。
------------------------------------
好，我們開始，如何畫格子？！
.container { display: grid; grid-template-columns: 100px 100px 100px; grid-row-gap: 1em; grid-column-gap: 2em; }
效果是這樣：
容器這樣設定樣式，設定grid-template-columns為3個100px，表示該container下面一行有三列，至于有多少行可以通過 grid-template-rows來設定，比如我們添加下面的css。
grid-template-rows: 100px 200px 300px;
變成了下面這樣：
上面的代碼我可以優化一下，通過repeat, 來改成下面這樣：
grid-template-columns: repeat( 3, 100px);
實際上這個就等于 100px 重複三次。
重點！！！！
但是grid-template-columns 和repeat經常配合起來使用，就比如文章開頭提到的那個效果實作。下面列舉了一下常見的用法：
grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr)) ;
我們先把grid-template-rows設定為3個100px, 或者将cell div高度設定為100px，然後讓第四個div跨兩行，可以像下面這樣寫：
grid-column-start: 1; grid-column-end : 3 ;
grid-column: 1 / 3 ;
grid-column: 1 / span 2 ;
最後的效果是這樣：
如果你想使用grid布局做出更加酷的效果，你也許需要了解一下grid-auto-flow
你也可以點選這個連結和這個連結來檢視本文的demo html檔案，裡面會有一些其他小的擴充。
但是更多的需要自己去探索！
參考： MDN
https://medium.freecodecamp.org/how-to-recreate-mediums-article-layout-with-css-grid-b4608792bad1
https://medium.com/@patrickbrosset/css-grid-css-multi-columns-7664f59bb60c