css grid 網格布局 - 網格區域對網格線的影響

網格區域的命名會影響網格線的命名。當給區域命名後，區域2條邊會自動得到命名 “-start” 和 “-end”。

這意味着一條網格線可能有多個名稱。比如以下 ：

.wrap{
	display: grid;
	grid-template-areas:'header header header'
						'sidebar main main'
						'footer footer footer';
}
           

區域名稱相同的，在使用時就像單元格合并，如以上的 main ，其上邊行線和左邊列線為 main-start，

下邊行線和右邊列線為 main-end。

網格的4條行網格線 ：

[header-start]、

[header-end sidebar-start main-start]、

[sidebar-end main-end footer-start]、

[footer-end]

網格的4條列網格線 ：

[header-start sidebar-start footer-start]、

[main-start]、

[]、

[header-end main-end footer-end]

注意，當設定了區域後，沒有指定網格項使用哪個區域時，網格項會按照排序放置在網格單元中。

也就是說，區域名稱一樣的網格單元會放置不同的網格項。

區域命名對網格線的影響 ：

.head{ grid-area:header; }

/* 等同于 */
.head{
	grid-column-start: header-start; /* = sidebar-start = footer-start */
	grid-column-end:footer-end;      /* = header-end = main-end */
}