CSS | 所以我說那個版能不能好切一點？ - Grid 基本用法
前言
Grid 是在 2011 年出現的排版方式，比 Flex 還要晚兩年面世。 Grid 出現不是為了要取代 Flex （ 如同 Flex 對 Float 的打擊），而是讓網頁的主 Layout 能夠更簡單的被拉出來，而細節的方面再搭配 Flex 處理內容的排列，這部分也要等實作後才能更清楚的理解，現在就先來認識這最後出現的超新星吧！
Grid
Grid 也是新增在 display 的新屬性，在排版上的應用類似於表格，可以為一整個區塊創建 X * Y 的子區域，並將 Grid 內的區塊排列放置格子中。
grid-template-rows & grid-template-columns
上述所說的劃分 X 及 Y 軸隔線靠的就是 grid-template-rows & grid-template-columns 這兩個屬性，下方會在這兩個屬性上設置每一個格的寬度，以 grid-template-columns 來說如果設定為 100px 100px 100px 100px ，就代表這個 Grid Box 內擁有四格，且每格寬度都是 100 px ， grid-template-rows 的設定也一樣，在設定完 X 與 Y 軸格線後， Grid Box 就會將內部的區塊整齊排列在每一個格子中：
如果覺得增加一格就得多填寫一個寬度覺得很麻煩的話，也可以搭配 CSS 中的 repeat 將上方的 grid-template-columns 改成：
grid-template-columns: repeat(4, 100px);這麼一來就會等於 100px 100px 100px 100px ，而如果有某欄要特別寬的時候也可以這麼做，是完全沒問題的：
// 會等同於 50px 50px 50px 250px
grid-template-columns: repeat(3, 50px) 250px;grid-auto-rows & grid-auto-columns
在相對簡單的 Grid Box 中，只要確定每欄或每列的寬度一樣，那就可以使用 grid-auto-rows 及 grid-auto-columns ，它會自動使用設定的寬度將 Grid Box 補滿：
grid-auto-rows: 100px;
grid-auto-columns: 100px;結果會如下：
欸？顯示的結果變成垂直排列了？因為用 auto 的關係，所以觸發了另一個 Grid 的 auto 設定。
grid-auto-flow
這個屬性可以控制資料的流向是橫向或是垂直的，預設值為 row ，所以才會一個一個 row 排下來，因此只要把它改成 columns ，就會依照 columns 排列：
另外，對於每一格之間的寬度或高度，也有 px 外的另一個單位能做調整，那就是 fr ， fr 是一個比例的概念，例如：
grid-template-columns: 1fr 1fr 2fr;這麼設定的話會讓 Grid Box 產生三欄，並且每欄的寬度為 1/4 、 1/4 、 2/4 ，分母 4 是所有的 fr 加起來的總數，對總數做比例單位就是 fr。
justify-content & align-content
在上一篇「 CSS | 所以我說那個版能不能好切一點？ — Flex 基本用法」，中提到的對齊方式在 Grid 上也可以使用，至於主軸與次軸的分別就是以 grid-auto-flow 設定的值為主，以下分別為 row 及 column 兩種情況做垂直置中：
第一個應該不會有問題，以 justify-content 設置主軸分散對齊， align-content 設置次軸置中，在 row 的情況下，次軸雖是置中了，但是主軸因為高度不夠的關係，所以沒有分散開來。
grid-template-areas & grid-area
接下來說明的屬性還滿有趣的，首先是 grid-area ，他可以為 Grid Box 內的區塊設置名稱，例如：
.item1 {
grid-area: A;
background: #afa;
}.item2 {
grid-area: B;
background: #aaf;
}
之後回到 Grid Box ，上方的例子將整個區塊切成 2 * 4 的網格，如果有隔線，那整個區塊看起來會是這樣：
|__|__|__|__|
| | | | |grid-template-areas 的用途就是以設定了 gird-area 名稱的區塊填滿每個格子：
grid-template-areas:
"A B B B"
"A B B B";呈現出來的結果就會將該名稱的區塊放在對應的格子中：
是不是超神奇的？但是 grid-template-areas 也是有一些規則在的：
grid-area必須連續及不能斷開。grid-area只能是 X * Y 的矩形。
依照這兩個規則，下方的設定都無法正確顯示結果：
// A 區塊已斷開
grid-template-areas:
"A B B A"
"A B B A";// A 及 B 區塊不是正確的矩形
grid-template-areas:
"A B B B"
"A A B B";
好的，但是這麼做還是有缺點對吧？如果版面中的 Grid 有 10 * 10 或 20 * 20 的網格大小，那 grid-template-areas 的設定會變得很慘不忍睹，因此除了上述的方式外也能夠以 grid-row & grid-column 直接指定區塊的位置。
grid-row & grid-column
這兩個屬性都是簡寫，本來是叫做 grid-row-start 、 gird-row-end 和 grid-column-start 、 grid-column-end 使用如下：
grid-row-start: 1;
grid-row-end: 2;簡寫的話就等於：
grid-row: 1 / 2;那它的意思是將指定區塊放到 Grid Box 的第一條線至第二條線，也就是起始線和終點線的意思，用起來結果如下：
上方的紫色區塊的 grid-row 設定為 1 / 2; gird-column 為 2 / 5 ，也就是橫向第 1 條線到第 2 條線，直向第 2 條線到第 5 條線的位置，這裡不妨猜猜看綠色區塊的放置設定為何。
除了上述的 grid-row 和 grid-column 外，也可以用 grid-area 一次將 row 及 column 的位置指定完：
grid-area: row_start / column_start / row_end / column_end結果會是相同的：
再提一個小技巧，因為 Grid 本身是一個網格系統，使用 gird-area 等屬性指定位置時，光算第幾條線的時候就可能會眼花，因此如果是最後一條線的話，可以使用 -1 來表示， -2 為倒數第二條…依此類推。
沒意外的話這會是排版系列的最後一篇文，因為之前參加了一些活動，堆著的設計稿還挺多的，所以接下來會開始實際練習切版，如果切版中有其他體會的話，會再把遇到的事情整理成文章。
如果對本文關於 Grid 的內容有任何不了解，或是覺得能夠再補充說明的地方，再麻煩留言告訴我，謝謝大家！
