前言

昨天那篇我已經補上囉!!!此篇將延續前一篇的使用教學，做一些細節延伸的，像是縮寫之類的，讓我們在使用上可以更為熟練！

格線可以命名你知道嗎？

像這是前篇沒有命名的版本，我們在container直接分了5個20%我們在元件使用時，就是用起點第1條線，終點第4條線來做使用的。

.container{
　　grid-template-columns: 20% 20% 20% 20% 20%;
}

.boxA {
　　grid-column-start: 1;
　　grid-column-end: 4;
}

但今天我們不想數到底第幾條線了，可以嗎？
當然沒問題啊！命名就好了！

我們可以在單位的前面，用方括弧 [] 為線條增加命名

.container{
　　grid-template-columns:[zero]20% [twenty]20% [forty]20% [sixty]20% [eighty]20%;
}

在元件使用上的時候就可以直接用名字囉！

.boxA {
　　grid-column-start: zero;　/* 第1條 */
　　grid-column-end: sixty; /* 第4條 */
}

我們可能會疑問說，我們分割成5個欄位，照理來說是6條線，可是命名只有5個，所以最後那條線怎麼用？
其實最後一條線依然可以用命名方式指定，他的預設名稱就是 end，直接使用就可以囉！

懶得寫重複的單位可以嗎？

我們前一篇想把欄位分成等比例的5個20%，竟然就要寫五次，哪裡受的了這樣重工呢！？

.container{
　　grid-template-columns: 20% 20% 20% 20% 20%;
}

所以我們有更好的方法可以報你知，就是用 repeat 處理，請幫我 repeat 5個20%，謝謝！

grid-template-columns: repeat(5, 20%);

repeat 想命名也可以哦！一樣是用方括弧 []

grid-template-columns: repeat(5, 20% [col]);

在元件要使用的時候，就記得在名稱後面加上index囉！
例如今天要從 col 的第1條到第4條：

.boxA {
　　grid-column-start: col 1;
　　grid-column-end: col 4;
}

grid-column／grid-row可不可以寫得更精簡些？

我們前一篇在設定元件要佔據格線中那些欄位跟行的時候，又寫起點又寫終點的，是不是覺得很麻煩？
像這樣，總共就要寫四行，有沒有更簡單的方法啊？有的！

.boxA {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}

像上面這個範例，我們可以簡寫成這樣哦！阿捏有沒有簡單？

.boxA {
    grid-column: 1 / 4; /* 起點 / 終點 */
    grid-row: 1 /2; /* 起點 / 終點 */
}

結語

因為我還在研究中，所以對 CSS Grid 的使用還不是很熟悉，而且我發現還滿多東西可以深入研究一下，所以預計後面還是會再繼續提一下 CSS Grid 哦！感覺真的滿彈性而且應用很廣，所以想多花些時間在這上面。