用 grid 構建 CSS 佈局系統（1）
大家在之前可能都用過 flexbox 來對 web 應用介面進行過佈局，應該相對之前我們需要使用各種技巧，尤其一些非常規的技巧來實現響應式佈局要容易的多吧。那麼最近新推出的 grid 佈局又是怎麼回事呢？其實我們早在兩年前就聽說過 grid 佈局那時候瀏覽器對他支援還不算好，所以沒敢下手學習。
那麼flexbox 和 grid 有什麼不同呢？Flexbox 是一維的佈局，而grid 應該算是二維佈局。所以 grid 在維度是完勝 flexbox，即使我們可以通過巢狀來實現複製的佈局。但是 grid 無需巢狀就可以實現相對複製的佈局。
我們還是通過程式碼為大家講解一下吧，這裡我建立一個簡單 html 頁面。
定義一個 wrapper 大家可以隨便定義，什麼 container 呀 page 儘管用，然後這些 html 我用了 emmet 來快速寫我的 html，這裡我們一些佔位文字只要寫 lorem 後面加數字就可以得到你想要的數量的文字。
只要後跟著80 就可以得到下面的文字是不是很輕鬆。
執行網頁看一下效果，不是很美觀我們還需要稍加修飾讓頁面看起來舒服些。
給一個背景色，給一點空間讓整個介面看起來舒服些。
為了區分不同 div 我們給奇數 div 點不同的樣式以便於區分。
好現在我們就開始應用我們 grid 系統，這裡講 display 屬性值給 grid 就建立了我們 grid 系統，如果給 flex 那麼就建立了我們 flex 系統。然後我們就開始定義寬度比了，這裡給出 grid-template-columns 70% 和 30% 表示兩列的比例關係
多給一些 div 讓我們更容易觀察到效果
我們也可以給出更多定義讓，
也可以定義 gap 來實現列之間的間隙
我們可以通過 grid-column-gap 和 grid-row-gap 為行和列分別新增間隙距離。
也可以通過grid-gap 來新增間隙空間。
