DAY21 搞样式--CSS Gird小进阶（Template Area）

前言

今天我们一样使用上篇的格线布局作为范例

假设我们现在想在容器（Container）中放入三个元件（item），分别是ABC，如下图：

那我们程序码的部分其实要写满长的，像这样

.boxA {
  grid-column: 1/4;
  grid-row: 1/2;
}
.boxB {
  grid-column: 2/5;
  grid-row: 2/3;
}
.boxC {
  grid-column: 3/6;
  grid-row: 3/4;
}

是不是觉得很麻烦呢？又要数从哪条起始线到哪条终点线，又要写好几行，却很不直观
所以这时候我们就可以使用 Template Area 来解决我们的困扰罗！

Template Area 是什麽？

简单来说，就是可以先将元件（item）命名，并透过容器（Container）设定元件（item）位置，让我们直接来尝试看看吧！

• 使用 grid-area 将元件（item）命名

.boxA {
  grid-area: areaA;
}
.boxB {
  grid-area: areaB;
}
.boxC {
  grid-area: areaC;
}

• 使用 grid-template-areas 於容器（Container）分配元件（item）位置

.container {
  grid-template-areas:
    "areaA areaA areaA . ."
    ". areaB areaB areaB ."
    ". .areaC areaC areaC";
}

可以看到我用到一个比较特别的属性 .
. 在 grid-template-areas 中使用，是留空白的意思哦！
所以以第一行来说就是前三格A，後两格空白

.container {
  grid-template-areas:
    "areaA areaA areaA . .";
    /* "areaA areaA areaA 空白 空白"; */ 
}

这样不晓得大家有没有觉得比较直观呢？