Grid 网格空间与命名

Grid 网格容器除了集合表格和弹性排版的优点，更特别的是可以针对空间或格线进行“命名”，当未来有指定元素要放入网格容器时，就能根据这些命名来定位，这篇教学会介绍 grid-template-areas 网格空间，以及如何使用命名的方式，更清楚的识别格线以及格线分隔出的空间，最后还会介绍使用 grid-template 和 grid 进行样式属性的缩写。

相关文章：Grid 网格容器与格线、Grid 网格流向与间距、Grid 排列网格项目、Grid 网格项目对齐、顺序与对齐

快速导览：

• 网格格线命名
• grid-template-areas 网格空间命名
• grid-template 网格定义 ( 缩写格式 )
• grid 网格 ( 缩写格式 )

网格格线的命名

在“使用 Grid 网格容器与格线”教学中已经学到网格格线的设定，设定的过程中，也可以适度的加入“格线名称”，当未来有元素要定位时，就能根据指定的名称进行定位，只要将名称写在“中括号”里，就能命名这个位置的格线，格线的命名并“不会对网格宽度造成任何影响”，主要是作为后续网格摆放位置的参考线。

下方的范例会透过格线将网格容器分成 3x3 的网格，并设定水平网格格线名称“col-start、col-1、col-2、col-end”以及垂直网格格线名称“row-start、row-1、row-2、row-end”。

由于 column 和 row 使用不同的命名空间，使用相同名称也不会有问题 ( 例如水平和垂直格线名称为 start )，但同为 column 或同为 row 的格线就不能同样名称。

线上展示：https://codepen.io/oxxo/pen/NWQbNqJ

<!-- HTML 程式碼-->
<div class="g g1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>8</div><div></div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    height: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 55px;
  }
  .g1 {
    grid-template-columns: [col-start] 1fr [col-1] 1fr [col-2] 1fr [col-end];
    grid-template-rows: [row-start] 1fr [row-1] 1fr [row-2] 1fr [row-end];
  }

  .g div{border: 1px dashed #000;}
</style>

grid-template-areas 网格空间命名

grid-template-areas 是可以“替网格空间命名”的样式属性，没有继承特性，初始值为 none，撰写的语法会根据 column 和 row 格线的设定，使用“矩阵”的方式设定各个网格的名称，使用时有下列重点：

• 使用一个以上的“.”表示“不需要名称”的网格 ( .、..、... 都可以 )。
• 相邻网格名称相同时，排版时会视为同一格 ( 延伸合并为一格的概念 )。
• 一但设定了网格名称，同时也会替网格周遭的格线“附加名称”。
• 附加的格线名称使用类似“别名”的方式不断添加，换句话说同一条格线会有不同的名称。
• 矩阵排列时必须是“四边形”，也就是 2x2、2x1、3x2...等，不能是 L 型、T 型或十字型等非四边形，不然会造成名称失效。

下方的范例会替一个具有格线名称的 3x3 网格设定每一格的名称，名称设定后，会自动替网格四周的格线附加“名称-start”或“名称-end”的格线名称，因为是“附加”的概念，同一条格线可能会同时具有多个名称。

线上展示：https://codepen.io/oxxo/pen/XWvNdmd

<!-- HTML 程式碼-->
<div class="g g1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>8</div><div></div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    height: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 55px;
  }
  .g1 {
    grid-template-areas: 
      "header header header"
      "left . right"
      "footer footer footer";
    grid-template-columns: [col-start] 1fr [col-1] 1fr [col-2] 1fr [col-end];
    grid-template-rows: [row-start] 1fr [row-1] 1fr [row-2] 1fr [row-end];
  }

  .g div{border: 1px dashed #000;}
</style>

如果单纯只是看“网格名称”或“格线名称”，会完全感受不到这些名称对于网格容器有什么影响，因为这些名称必须搭配其他“网格项目”元素操作，类似先把柜子的空间以及这个空间的名称设定，就可以将特定的物品放入特定名称的网格，下方范例会将 grid-column-start、grid-column-end 等样式属性加入网格项目，该项目就会自动填满网格名称或格线名称所构成的范围。

线上展示：https://codepen.io/oxxo/pen/BaXQKoG

<!-- HTML 程式碼-->
<div class="g g1">
  <div class="header"></div>
  <div class="left"></div>
  <div></div>
  <div class="right"></div>
  <div class="footer"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    height: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 55px;    
  }
  .g1 {
    grid-template-areas: 
      "header header header"
      "left . right"
      "footer footer footer";
    grid-template-columns: [col-start] 1fr [col-1] 1fr [col-2] 1fr [col-end];
    grid-template-rows: [row-start] 1fr [row-1] 1fr [row-2] 1fr [row-end];
  }

  .g div{border: 1px dashed #000;}

  .header{
    background: #fc6;
    grid-column-start: header;  /* 從網格名稱 header 開始 */
    grid-column-end: header;    /* 到網格名稱 header 結束 */
  }
  .left{
    background: #f6f;
    grid-column-start: left;  /* 從網格名稱 left 開始 */
    grid-column-end: left;    /* 從網格名稱 left 結束 */
  }
  .right{
    background: #999;
    grid-column-start: right-start;  /* 從格線名稱 right-start 開始 */
    grid-column-end: right-end;      /* 從格線名稱 right-end 結束*/
  }
  .footer{
    background: #0c0;
    grid-column-start: footer-start;  /* 從格線名稱 footer-start 開始 */
    grid-column-end: footer-end;      /* 從格線名稱 footer-end 結束*/
  }
</style>

grid-template 网格定义 ( 缩写格式 )

grid-template 可以缩写 grid-template-* 相关的样式属性，可以一次指定完成格线名称、网格空间名称、网格大小...等常用设定样式属性，撰写方式使用“/”分隔 row 和 column 各自的属性值，格式为“row / column”，且“不支援 repeat 语法”。

下方范例使用三种不同的缩写方式，虽然都能产生相同的结果，但仍会有下列的差异：

线上展示：https://codepen.io/oxxo/pen/qBeRzdp

<!-- HTML 程式碼-->
<div class="g g1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g2"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g3"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 200px;
    height: 200px;
    outline: 1px solid #000;
    margin: 10px 10px 20px;
    display: grid;
  }
  .g1 {
    grid-template: 
      "a a a" 20px
      "b c c" 50px
      "b d d" 130px/
      50px 1fr 1fr;
  }
  .g2 {
    grid-template: 
      [r1] "a a a" 20px
      [r2] "b c c" 50px
      [r3] "b d d" 130px [r4]/
      [c1] 50px [c2] 1fr [c3] 1fr [c4];
  }
  .g3 {
    grid-template: 20px 50px 130px/ 
      50px 1fr 1fr;
  }
  .g div {outline: 1px solid #000;}
</style>

如果完全不设定列或栏的尺寸也可以，就会使用网格名称自动分配空间，下方范例只会设定网格空间名称，就会变成正方形九宫格的呈现方式 ( 注意，如果要设定格线名称，就必须设定列或栏的尺寸 )。

线上展示：https://codepen.io/oxxo/pen/RwXKzPe

<!-- HTML 程式碼-->
<div class="g"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>


<!-- CSS 程式碼 -->
<style>
  .g {
    width: 200px;
    height: 200px;
    outline: 1px solid #000;
    margin: 10px 10px 20px;
    float: left;
    display: grid;
    grid-template: 
      "a a a"
      "b c c"
      "b d d";
  }
  .g div {outline: 1px solid #000;}
</style>

grid 网格 ( 缩写格式 )

grid 也是一个“缩写”相关的样式属性，用法和 grid-template 大同小异，差别在于可以额外设定 grid-flow、grid-auto-rows 和 grid-auto-columns 相关样式属性 ( 参考“Grid 网格流向与间距”)，设定时有下列三种写法 ：

• 类似 grid-template 写法：
  • grid-template-rows / grid-template-columns
• row 流向写法 ( 流向后方数值为 row 的自动尺寸 )：
  • auto-flow grid-auto-rows / grid-template-columns
  • auto-flow dense grid-auto-rows / grid-template-columns
• column 流向写法 ( 流向后方数值为 column 的自动尺寸 )：
  • grid-template-rows / auto-flow grid-auto-columns
  • grid-template-rows / auto-flow dense grid-auto-columns

下方使用三个范例，分别呈现三种写法，以及对应完整的样式属性。

线上展示：https://codepen.io/oxxo/pen/BaXpgZB

<!-- HTML 程式碼-->
<div class="g g1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div>
<div class="g g2"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div>
<div class="g g3"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 200px;
    height: 200px;
    outline: 1px solid #000;
    margin: 10px 10px 20px;
    display: grid;
  }
  .g1 {
    grid: 
      "a a a" 20px
      "b c c" 40px
      "b d d" 60px
      "b d d" 80px/
      50px 1fr 1fr;
  }
  .g2 {
    grid: 
      20px 50px 130px/
      auto-flow dense 20px 1fr;
  }
  .g3 {
    grid: 
      auto-flow dense 20px 45px/
      1fr 1fr;
  }
  .g div {outline: 1px solid #000;}
</style>

小结

“网格命名”或“格线命名”是操作网格容器的重要技巧，虽然不使用名称也可以正常运作 ( 透过格线的顺序 )，但名称能让格线或网格更有意义，后续维护也更容易识别，此外，使用缩写的方式虽然可以大幅减少程序码，但如果对于语法不熟悉，反而容易搞不清楚缩写的意义，建议熟练之后再使用缩写会更恰当。

相关文章：Grid 网格容器与格线、Grid 网格流向与间距、Grid 排列网格项目、Grid 网格项目对齐、顺序与对齐

意见反馈