CSS3 grid layout（网格布局）（二）

让我们接着来看网格布局

四、网格轨道

我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的 行 和 列。这些属性定义了网格的轨道。一个网格轨道就是网格中 任意 两条线之间的空间。在下图中你可以看到一个高亮的轨道——网格的第一个行轨道。
这个行轨道的生成方式十分简单，我们只需要在之前例子的代码（详参我的上一篇有关网格布局的博客 grid layout（网格布局）（一））中添加一行代码即刻（当然颜色还是需要自己另加的啦）。

代码如下

.wrapper {
            display: grid;
            border: 1px solid;
            grid-template-rows: 100px; /添加一个高度为100px的行轨道/
        }

既然可以添加一个行轨道，那就必然可以添加两个，方式也很简单 只需要在 grid-template-rows 的属性值后再追加一个值即可，让我们来追加一个 高度为200px的行轨道

.wrapper {
            display: grid;
            border: 1px solid;
            grid-template-rows: 100px 200px; /添加一个高度为100px的行轨道和一个200px的行轨道/
        }

效果如图

下面来看列轨道

生成列轨道的属性名为 grid-template-columns。

让我们在之前的例子上添加一个列轨道

.wrapper {
            display: grid;
            border: 1px solid;
            grid-template-columns: 100px; /添加一个宽为100px的列轨道/
        }

效果如图

图中颜色标明的区域即为列轨道，我们可以看到所有网格元素均匀的排布在了列轨道之中

下面我们来再添加一个列轨道，列轨道的添加和行轨道的添加方式一样，在属性值后追加额外的值即可

.wrapper {
            display: grid;
            border: 1px solid;
            grid-template-columns: 100px 200px; /添加一个宽为100px的列轨道和一个宽为200px的列轨道/
        }

效果如图

能够看到，在我们创建了第二个列轨道之后，有两个网格元素被分配了过去。这是因为列轨道会尽可能的将网格元素 均匀的 分布在 每个 列轨道中。

如果我们再添加一个列轨道

.wrapper {
            display: grid;
            border: 1px solid;
            grid-template-columns: 100px 200px 100px; /添加一个宽为100px的列轨道和一个宽为200px的列轨道以及一个宽为100px的列轨道/
        }

效果如图

看完三个列轨道的效果图，我想现在你对列轨道均匀分布网格元素的方式应该有所理解了。

这次有关网格布局就介绍到这里

敬请关注我的后续博客