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 */
}