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 的格線就不能同樣名稱。
<!-- 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」的格線名稱，因為是「附加」的概念，同一條格線可能會同時具有多個名稱。
<!-- 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 等樣式屬性加入網格項目，該項目就會自動填滿網格名稱或格線名稱所構成的範圍。
<!-- 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 語法」。
下方範例使用三種不同的縮寫方式，雖然都能產生相同的結果，但仍會有下列的差異：
| 寫法 | 網格空間名稱 | 網格空間自動格線名稱 | 格線名稱 | 列和欄的尺寸 |
|---|---|---|---|---|
| g1 | 有 | 有 | 沒有 | 有 |
| g2 | 有 | 有 | 有 | 有 |
| g3 | 沒有 | 沒有 | 沒有 | 有 |
<!-- 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>
如果完全不設定列或欄的尺寸也可以，就會使用網格名稱自動分配空間，下方範例只會設定網格空間名稱，就會變成正方形九宮格的呈現方式 ( 注意，如果要設定格線名稱，就必須設定列或欄的尺寸 )。
<!-- 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-columnsauto-flow dense grid-auto-rows/grid-template-columns- column 流向寫法 ( 流向後方數值為 column 的自動尺寸 )：
grid-template-rows/auto-flow grid-auto-columnsgrid-template-rows/auto-flow dense grid-auto-columns
下方使用三個範例，分別呈現三種寫法，以及對應完整的樣式屬性。
<!-- 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>
小結
「網格命名」或「格線命名」是操作網格容器的重要技巧，雖然不使用名稱也可以正常運作 ( 透過格線的順序 )，但名稱能讓格線或網格更有意義，後續維護也更容易識別，此外，使用縮寫的方式雖然可以大幅減少程式碼，但如果對於語法不熟悉，反而容易搞不清楚縮寫的意義，建議熟練之後再使用縮寫會更恰當。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～