CSS Grid布局：图解网格布局中术语二
在上一节中，主要介绍了CSS Grid布局中网格线、网格布局属性、单元格合并等相关术语，在这篇文章中将继续介绍网络布局中的相关术语：网格区域，网格轨道和网格单元格。希望对大家对学习CSS Grid布局有所帮助。
网格区域（Grid areas）
记得前面的文章中介绍网络线的一节中，了解到可以通过grid-row和grid-column构建出grid-area（也就是我们要说的网格区域）。通过网格线构建的网格区域，其有一个明确的顺序：grid-row-start / grid-column-start / grid-row-end / grid-column-end。如下面示例所示：
.item-1 {
grid-area: 1 / 1 / 2 / 4;
}
.item-2 {
grid-area: 2 / 1 / 4 / 2;
}
.item-4 {
grid-area: 2 / 3 / 4 / 4;
}
.item-6 {
grid-area: 4 / 1 / 5 / 4;
}
效果如下：
上面这种方式，能通过网格线构造出想要的网格区域。但更妙的是，在CSS Grid布局中可以直接定义网格区域，用来放置对应的网格项目。CSS Grid布局有可以使用grid-template-areas属性来声明。然后使用grid-area调用声明好的网格区域名称来放置对应的网格项目。
假设我们有一个5 x 4的网格：
<section class="grid">
<div class="title">title</div>
<div class="nav">nav</div>
<div class="main">main</div>
<div class="aside">aside</div>
<div class="footer">footer</div>
</section>
先在把.grid声明为网格容器：
.grid {
grid-template-columns: 100px 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px;
grid-template-areas:
'title title title title aside'
'nav main main main aside'
'nav main main main aside'
'footer footer footer footer footer';
}
通过grid-template-rows设置了每行的行高，grid-template-columns设置了每列的列宽，而使用grid-template-areas是用来声明了网格区域。
把对应的网格项目放到已声明好的网格区域上：
.title {
grid-area: title;
}
.nav {
grid-area: nav;
}
.main {
grid-area: main;
}
.aside {
grid-area: aside;
}
.footer {
grid-area: footer;
}
对应的意思草图如下所示：
最终上面代码绘制出来的网格效果如下：
网格区域和网格线命名
有关于网格区域和位置属性是一个非常有趣的事情，可以使用网格线的隐名来创建一个网格区域。这些隐名使用-start和-end后缀添加到网格区域名后面。比如上面示例中的title区域创建了4条网格线的隐名：
- 区域左边的网格线
title-start - 区域右边的网格线
title-end - 区域顶边的网格线
title-start - 区域底边的网格线
title-end
像下面的例子，可以使用隐式名来放置一个网格项目：
grid-column: main-start / aside-end;
grid-row: title-start / nav-end;
在网格布局中，如果你使用了带有后缀的名词命名了网格线，其实就创建了一个隐式的网格区域，所以像下面这样的方式，也可以创建和前面示例相同的网格：
.grid {
display: grid;
grid-template-columns: [title-start nav-start footer-start] 100px [main-start nav-end] 100px 100px 100px [aside-start title-end main-end] 100px [aside-end footer-end];
grid-template-rows: [title-start aside-start] 100px [nav-start main-start title-end] 100px 100px [footer-start nav-end main-end aside-end] 100px [footer-end];
}
这样创建好网格线之后，可以直接通过grid-area调用隐式的网格区域名来创建网格：
除此之外，还可以通过grid-row和grid-column调用网格线名称，创建网格：
.title {
grid-row: title-start / title-end;
grid-column: title-start / title-end;
}
.nav {
grid-row: nav-start / nav-end;
grid-column: nav-start / nav-end;
}
.main {
grid-row: main-start / main-end;
grid-column: main-start / main-end;
}
.aside {
grid-row: aside-start / aside-end;
grid-column: aside-start / aside-end;
}
.footer {
grid-row: footer-start / footer-end;
grid-column: footer-start / footer-end;
}
效果如下：
或许你可能会觉得，在grid-template-rows和grid-template-columns中使用一大串的[title-start aside-start]等方式声明隐式网格线，创建隐式的网格区域麻烦。但事实上，我们不需要这样做，通过grid-template-areas声明的网格区域，就已经创建了隐式网格线，如此一来，不使用grid-area而使用grid-row和grid-column就可以放置对应的网格项目。
.grid {
display: grid;
grid-template-columns: 100px 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px;
grid-template-areas:
'title title title title aside'
'nav main main main aside'
'nav main main main aside'
'footer footer footer footer footer';
}
.title {
grid-row: title-start / title-end;
grid-column: title-start / title-end;
}
.nav {
grid-row: nav-start / nav-end;
grid-column: nav-start / nav-end;
}
.main {
grid-row: main-start / main-end;
grid-column: main-start / main-end;
}
.aside {
grid-row: aside-start / aside-end;
grid-column: aside-start / aside-end;
}
.footer {
grid-row: footer-start / footer-end;
grid-column: footer-start / footer-end;
}
网格轨道（Grid Tracks）
网格轨道用更好的词来描述其实就是网格的行或列。就是网格中相邻两条网格线组成的区域。如下图所示：
如上图所示，竖线网格线1和2（蓝绿色）组成了第一列；竖线网格线5和6（黄色）组成了第五列；横线网格线1和2（酒红色）组成了第一行。那么这几个区域都是我们所说的网格轨道。
网格中的每个轨道(行或列)都有一个尺寸函数，用来控制行的高度或列的宽度。而且还具备自动计算的功能，当内容超过网格行、列指定的尺寸时，会自动增加行的高度或列的宽度。另外相邻网格轨道可以通过网格间距隔开。
单元格(Grid Cell)
网格单元格（Grid Cell）是指网格行和列交叉点。它是一个可以定位网格项目时要参考的网格的最小单位。
在网格布局中，多个单元格可以构成一个网格区域。其实他就像表格（table）中的td。
总结
继上一篇文章之后，在这篇文章中介绍了网格区域、网格轨道和网格单元格的术语。除了这两篇文章介绍到的中网格线、网格布局属性、单元格合并、网格区域、网格轨道和网格单元格之外还有其他术语，在下一篇文章中将详细介绍网格布局中的网格术语。也是较为复杂的一部分。感兴趣的同学欢迎持续关注后续的更新。
大漠
如需转载，烦请注明出处：https://www.fedev.cn/css3/css-grid-layout-terminology-part2.html