[教學]Grid
可以二維排列的Grid
前言
grid是一個很好用的排版工具之一，他甚至比flex好用呢！兩者之間有相似也有不相似的地方，就讓我們繼續看下去吧！
grid的包法與flex一樣，需要有外層的.container，也需要有內層的.items，若不懂內外層之間的關係，可以去看看我之前寫的[教學]FLEXBOX。
照慣例，先來看看Container、Items的屬性有哪些：
Container：
Items：
Container
跟flex一樣，grid大都是在container裡面下指令。
Display
先宣告要使用grid來排版。
grid不像flex一下display就會有變化，它還需要把空間切成一塊一塊的才能使用，雖說有些麻煩，但事後在定位排版上會比較好操作，靈活度也比flex還要來得高。
Grid-template-columns_rows
Template的意思為模板，我們透過這個屬性把想要的區塊切開。它的語法主要分兩個：
＊給定的值可以使用px、%、fr等長度單位
我們從左至右看，可以發現每一格的寬度是「100px 50px auto 200px 1fr」，這不就跟css內的grid-template-column一樣嗎！它的意思是「切幾格，每格自己給定」，以剛剛的例子來說就是切五格，每格的長度按照裡面的值所定。同理grid-template-rows也是如此。
Grid-template-areas
這東西像是給定切好的區塊一個名字，之後在items叫它去該區塊。在Container裡先設好模版該長什麼樣、該叫什麼名字，每個格子裡要放哪個items。
上面的例子就是把Container切成4欄，第一列統一都是header；第二列main佔2欄，之後的為空白，最後一欄是sidebar；第三列皆為footer。而Items就分別帶入各自的名字。
＊空白的地方以".“代替
Grid-gap
這個功能類似上次提到flex的gap，若不知道在講什麼的朋友可以先來看看[教學]GAP再來了解。
grid-gap好用的地方在於它的彈性更多，safari也能夠讀取。它有三種寫法，column-gap及row-gap分別控制行、列之間的間隙，而grid-gap是兩個我都要！一次控制行列的間隙。
值得注意的是，這裡給定的值是會影響整個寬度的喔！舉例來說，grid-template-column: 50% 50%，如果我們加上column-gap: 50px，那麼寬度是會炸開的，因為他們的總和超過100%了。
所以我通常使用fr的單位，變成grid-template-colum: 1fr 1fr就不會有這個問題了。fr的概念可以想像成「將剩餘的空間按照比例去分配」，以grid-template-colum: 1fr 1fr為例，1+1=2，所以每一份間隔皆為1/2。
那麼依樣畫葫蘆，grid-template-colum: 1fr 2fr 3fr每一欄的寬度分別為1/6，2/6，3/6，是不是蠻簡單的～
Justify-items
此功能與flex的justify-content類似，同樣是控制items水平靠左、置中、靠右。grid不用控制主軸與次軸，因此justify-content就是控制「水平」方向的排版。
＊使用stretch時，不可控制裡面的大小，不然會調不動
Align-items
這個功能就跟flex的align-items一模模一樣樣～直接輕鬆套用！
＊使用stretch時，不可控制裡面的大小，不然會調不動
到這裡其實可以發現grid的排版方式其實比flex簡單很多，flex光是方向在那邊換來換去就已經搞死不少人了，而grid一次控制好兩邊，功能可以做到很複雜但依然好懂！
container的功能就先到這裡告一段落了，雖然還有其他的功能，但我覺得不常用，因此就沒放上來了（其實就是懶得寫啦哈哈哈哈
Grid-column_row
grid將container切成網格狀，再把items一個一個塞入每格的格子裡，若想把其中的一個items塞入好幾格格子，我們可以使用grid-template-areas來命名格子的名稱，再把items一次塞進去。這裡有個更好用的方法就是使用grid-colum以及grid-row。
我們使用grid-colum以及grid-row來刻出上面grid-template-areas的版面吧！
範例當中我們把每列切成4欄。header需要把第一列佔滿，因此為grid-colum: 1/5，我們把每列切成4塊，所以會有5條線，也就是範例當中的黃線，由左至右分別為1~5，那麼1/5的意思就是從第1條線到第5條線。
再來看看sidebar，它需要在最右邊，假設沒有控制他的話它就會接著前面的格子繼續排下去。因此它的grid-colum為4/5。
此範例僅使用grid-colum而已，若和grid-row搭配可以產生出更多樣的排版方式。
Justify-self
justify-self是控制item自己的水平排版，這可是flex所沒有的屬性，flex根本不給排啊～
＊此範例container使用水平、垂直置中，justify-self下的指令會壓過外層container
Align-self
來到最後一個屬性：align-self，是控制item自己的垂直排版，這屬性flex倒是有的，用法其實也一模一樣～
＊此範例container使用水平、垂直置中，align-self下的指令會壓過外層container
結語
grid的用法很多變，每次有版面切不出來時我通常都會用grid來切，如果切不出來的話…那就把grid、flex混搭一起用，效果更好！
BTW，最近真的有夠忙的，近期應該不會再更新這種教學了，要花費豪多時間呢！之後應該會更新一些小教學，至於是什麼呢～我也不知道，因為根本還沒想哈哈哈，就這樣了，ㄅㄅ～
參考資料：
