CSS gird 在最近 Chrome 更新已經慢慢開始支援 (就是還很久才會完全支援的意思)，開始之前還是來介紹一些語法。
與 CSS Flex 一樣，CSS Grid 用兩個部分來看比較快，一個是屬於外部容器的屬性，另一個是屬於內部容器的屬性；從外開始向內看可以加快理解的速度。
CSS Grid 可以做什麼呢？這邊提供一個簡單範例給大家看看，相同的 Grid System 如果使用 float 需要多很多層，還要注意清除浮動等等。在 CSS grid 的加持下每個 class 都僅需少量的屬性就可做到相同的效果。
See the Pen CSS Grid Layout by Wcc723 (@Wcc723) on CodePen.
本篇內容有許多參考 https://css-tricks.com/snippets/css/complete-guide-grid/
外部容器
dispaly
和 Flex 一樣，需要定義容器的顯示類型。
.container {
display: grid | inline-grid | subgrid;
}grid-template-columns, grid-template-rows
看完這個屬性，對於 CSS Grid 就會有基礎的了解。
Grid 和 flex 最大不同之處，透過 grid template 來定義版型的結構，分別由 column 及 row 定義出直排與橫列的格線，內容再依隔線作安排。
圖片來源：https://css-tricks.com/snippets/css/complete-guide-grid/
.container {
grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}- track-size: 可使用彈性的長度、百分比或分數 (分數的部分需使用 fr 單位)
- line-name: 可自行命名的名稱
圖片：自己畫的
.wrap {
display: grid;
grid-template-columns: 200px 50px auto 50px 200px;
grid-template-rows: 25% 100px auto;
height: 100vh;
width: 940px;
margin: 0 auto;
}粉紅色的部分就是 grid-template-columns，黃色部份則是 grid-template-rows，隔線排版就能靠上面一張圖了解！grid-template-columns 定義水平方向的空間，grid-template-rows 定義垂直方向的空間，且可以使用大部分的單位數值。
.wrap {
grid-template-columns: repeat(2, 1fr 2fr) 100px;
/* grid-template-columns: repeat({次數}, {格線...} | {格線...}) | {格線...}; */
}這個地方在介紹兩個新東西，一個是 fr 這個單位，這個單位能夠將可用的 剩餘空間 做比例分割，以上面的 1fr 2fr 為例，空間將被分割成 1/3、2/3 兩個大小。
另一個是 repeat，可以重複隔線。
grid-template-areas
透過 area 定義區塊在 template 上的位置，概念就是在畫面上登記屬於該元素的空間，此部分要內外元素一起看。
- 內元素 grid-area：定義空間的名稱
- 外元素 grid-template-areas：定義空間的位置，是透過幾組字串的組合，組合方式可以參考下圖及程式碼。
假設我們需要繪製如上的空間配置，上方出現 5 * 3 那麼會透過 grid-area 來命名小空間的名稱，再透過 grid-template-areas 來表示整體空間的配置，配置的方式是透過字串的方式組合。
.wrap {
display: grid;
grid-template-columns: 200px 50px auto 50px 200px;
grid-template-rows: 25% 100px auto;
grid-template-areas:
"header header header header header"
"side main main main main"
"side footer footer footer footer";
height: 100vh;
width: 940px;
margin: 0 auto;
}
.item-a {
grid-area: header;
background-color: purple;
}
.item-b {
grid-area: main;
background-color: orange;
}
.item-c {
grid-area: side;
background-color: green;
}
.item-d {
grid-area: footer;
background-color: gray;
}注意：
- 空間不能分離且是唯一的，錯誤範例:
"side main side"
grid-auto-columns, grid-auto-rows
簡單版的 Grid，如果版型較為簡單，可以直接使用 grid-auto-{ cols or rows}。如果是簡易的 960 12欄 grid 設定如下即可。
.row {
display: grid;
grid-auto-columns: 60px;
grid-auto-flow: column;
grid-gap: 20px;
width: 940px;
min-height: 100vh;
margin: 0 auto;
}grid-auto-flow
Grid 的排列方式，以上面 12 欄排列 grid 來說，如果沒有設定 column，就會變成垂直排列。
.row {
grid-auto-flow: row | column | row dense | column dense
}grid-gap, grid-column-gap, grid-row-gap
格線的間隔包含垂直及水平，可參考如下。
grid-column-gap: { grid-column-gap };
grid-row-gap: { grid-row-gap };
grid-gap: { grid-row-gap } { grid-column-gap };justify-items, justify-content, align-content
與 flex 的使用方法一樣，先跳過之後再補充
內部容器
grid-column-start, grid-column-end, grid-row-start, grid-row-end
物件所佔的空間位置，Column 及 Row 所到的起始點及終點
.item {
grid-column-start: <number> | <name> | span <number> | span <name> | auto
grid-column-end: <number> | <name> | span <number> | span <name> | auto
grid-row-start: <number> | <name> | span <number> | span <name> | auto
grid-row-end: <number> | <name> | span <number> | span <name> | auto
}<line>- 用數字表示 物件 所在的線，可參考上一段的 template- span
<number>- 物件所佔用的欄位數 - span
<name>- 物件所在的 grid 名稱 - auto - 自動的啦
.item {
grid-column-start: 2; /* 物件起始線 */
grid-column-end: span 4; /* 終點線 = 物件所佔的空間數 */
grid-row-start: 3; /* 物件起始線 */
grid-row-end: auto; /* 不設定終點線 */
background-color: red;
z-index: 999; /* 欄位重疊可用 z-index 設定前後順序 */
}grid-column, grid-row
上面那段的縮寫，使用斜線 (/) 隔開屬性。
.item {
grid-column: 2 / span 4;
}grid-area
<name>: 使用命名的方式，透過grid-template-areas來套用<row-start>/<column-start>/<row-end>/<column-end>: 指定 grid 線數或 grid 名稱來定位
.item-a {
grid-area: 2 / 2 / 4/ 4;
}justify-self, align-self
內容器的定位模式，與 flex 使用方式一樣。
Grid 目前想到的運用方面有：
- 滿版的排版，適合拿來做平面設計風格的排版
- 輕量的 grid system，或許下次 Bootstrap 就改用 Display grid 在排版了 ~_~。