DAY20 搞样式--CSS Gird 怎麽用（下）？

前言

昨天那篇我已经补上罗!!!此篇将延续前一篇的使用教学，做一些细节延伸的，像是缩写之类的，让我们在使用上可以更为熟练！

格线可以命名你知道吗？

像这是前篇没有命名的版本，我们在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 哦！感觉真的满弹性而且应用很广，所以想多花些时间在这上面。