html布局线条,使用命名线布局

如果要给网格中所有的线都定义唯一的名字，就要用普通写法，即在定义轨道时把名字写在方括号里，而不能使用 repeat 语法。使用 repeat 语法的结果是得到有相同名字的多条线，不过这也是有用的。

下面的例子创建了一个有 12 个等宽列的网格，在定义列轨道尺寸为 1fr 之前，也定义了网格线名字 [col-start]，也就是说最终会创建一个 12 列的网格，每个 1fr 宽的列左侧的线都被命名为 col-start。

.wrapper {

display: grid;

grid-template-columns: repeat(12, [col-start] 1fr);

}

网格创建好之后，就可以在其中定位项目了。我们有多条名为 col-start 的线，如果有一个项目位于 col-start 之后，就是指命名为 col-start 的第一条线，也就是指最左边那条线。如果要引用其他的同名线，就要加上序号。比如要定位项目从名为 col-start 的第1条线开始，到第5条线结束，应该这样写：

.item1 {

grid-column: col-start / col-start 5

}

此处也可以使用 span 关键字。比如下一个项目的位置从名为 col-start 的第7条线开始，跨越3条线。

.item2 {

grid-column: col-start 7 / span 3;

}

I am placed from col-start line 1 to col-start 5

I am placed from col-start line 7 spanning 3 lines

如果在 Firefox Grid Highlighter 中查看布局，就能观察到纵向的列线，以及项目是如何依赖这些线来定位的。

The repeat syntax can also take a track list, it doesn’t just need to be a single track size that is being repeated. The code below would create an eight track grid, with a narrower 1fr width column named col1-start followed by a wider 3fr column named col2-start.

repeat 语法不仅可用于重复的单一轨道尺寸，也可以用于轨道列表。下面的代码创建了一个 8 个轨道的网格，在一个名为 col1-start 的 1fr 窄轨道之后，跟着是一个名为 col2-start 的 3fr 宽轨道。

.wrapper {

grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);

}

如果 repeat 语法包含相邻的两条网格线，那它们会被合并，结果就像是不用 repeat 语法的创建的，所有的网格线都有多个名字。在下面的定义中，创建了四条 1fr 的轨道，每条轨道都有开始名和结束名。

.wrapper {

grid-template-columns: repeat(4, [col-start] 1fr [col-end] );

}

如果不用 repeat 语法来定义它们，应该写成这样。

.wrapper {

grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end];

}

如果已经定义了一个轨道列表，接下来在使用 span 关键字定位项目时，不仅可以在 span 后面写一个行序数，还可以在 span 后面写一个命名线的行序数。

.wrapper {

display: grid;

grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);

}

.item1 {

grid-column: col1-start / col2-start 2

}

.item2 {

grid-row: 2;

grid-column: col1-start 2 / span 2 col1-start;

}

I am placed from col1-start line 1 to col2-start line 2

I am placed from col1-start line 2 spanning 2 lines named col1-start

通过前面的三篇文章，我们发现使用网格布局时有非常多不同的方法来定位项目，这乍看起来有些过于复杂了，不过其实你不必把它们都用上。在实践中，我发现使用命名的模块区域是最直截了当的布局方法，它的可视化表示法能让你看到布局的效果，并且也容易在网格上移动项目。

一个严格的多列布局已经可以工作得很好了，比如本文最后一部分用命名线做的演示，如果你考虑使用 Foundation 或 Bootstrap 这类框架，它们提供的是基于 12 列的网格系统，框架会导入代码然后进行计算以确保所有的列宽加在一起是 100%。如果使用网格布局，那么我们的“框架”只有这些代码就够了：

.wrapper {

display: grid;

grid-gap: 10px;

grid-template-columns: repeat(12, [col-start] 1fr);

}

然后就可以使用这个框架来布局页面了。比如，创建一个三列的布局，有头部和尾部，HTML 代码如下所示。

I am the header

I am sidebar 1

I am the main article

I am sidebar 2

I am the footer

接下来就可以在网格布局框架上定位元素了。

.main-header,

.main-footer {

grid-column: col-start / span 12;

}

.side1 {

grid-column: col-start / span 3;

grid-row: 2;

}

.content {

grid-column: col-start 4 / span 6;

grid-row: 2;

}

.side2 {

grid-column: col-start 10 / span 3;

grid-row: 2;

}

再一次，Firefox Grid Highlighter 工具帮助我们看到网格是如何定位项目的。

这就是我们需要的，不用做任何计算，网格在分配 1fr 的列轨道空间之前会自动把 10 像素的轨道间距删除掉。在你动手创建自己的布局的过程中，语法会变得越来越熟悉，你能找到适于自己的方法和喜欢创建的项目类型。尝试用不同的方法去创建一些通用的布局模式，你会找到最适合自己的工作方式。在下一篇文章中我们会探讨如何用网格定位元素 —— 根本不需要使用定位属性！