文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

Placing elements using Grid Layout module

在本文中,我们将学习7种方法,使我们可以利用网格化布局模块将元素放置在网页中。

再次之前, SitePoint发表了CSS的网格布局介绍tCSS网格布局模块介绍两篇文字。最近,我也写了CSS网格布局在那些方面起作用-草稿.

在这里,我们将注意力放在用CSS网格来布局网页元素这种特定的方式上。现在,让我们重温一下每一种方法。

解决支持网格化布局贫乏的问题

正如我在以前的文章中提到的,支持网格布局的浏览器非常少。没有主流浏览器默认支持它,IE也只支持旧的实现版本。想要正确运行本文中的示例,我建议你可以用有“测试网络平台功能”的Chrome浏览器和有“Layout.css.grid”标志的Firfox浏览器。对于那些找这些标志有困难的读者,我添加了一个截图来显示每种技术的最终结果。

第 1 段(可获 2.23 积分)

#1 在单个属性中指定所有内容

CSS Grid Layout-Specifying Everything in Individual Properties Example

这是我们在以前的文章中用来放置元素的版本。 这种方法虽然冗长但容易理解。 基本上,使用grid-column-start/grid-column-endgrid-row-start/grid-row-end属性指定元素的左/右和上/下边界。 如果一个元素只跨越一行或一列,你可以省略 -end 属性,这样你将不得不写一点CSS。

在下面的演示中,元素A已使用以下CSS放置在第二行和第二列:

第 2 段(可获 1.18 积分)
.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

同样的效果可以用下面的代码实现:

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

看SitePoint的文笔 定制自定义属性的各个方面 (@SitePoint) 在CodePen上.

 

#2 使用 grid-rowgrid-column

CSS Grid Example Using grid-row and grid-column

虽然我们的第一个例子中的CSS既可读又易于理解,我们还是不得不使用四个不同的属性来放置一个元素。 要替换这四个属性,我们仅仅使用 — grid-columngrid-row就够了。这些属性的值都会被消减到两个,第一个值将定义线的起点,第二个值则定义线的终点。

第 3 段(可获 1.16 积分)

以下这些是你需要使用的属性的语法:

.selector {
  grid-row: row-start / row-end;
  grid-column: col-start / col-end;
}

将项目C放到右下角的网格里,我们可以用下面的CSS:

.c {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

参考SitePoint的文笔使用grid-row和grid-column(@SitePoint)在CodePen上.

 

#3 使用grid-area

CSS Grid - Example Using grid-area

从技术上讲,我们布局的项目覆盖了网页的特定区域。该项目的边界是由我们提供的网格线的值决定的。所有的这些值都可以用grid-area属性来一次性提供。

第 4 段(可获 1.06 积分)

使用这个属性,你的CSS这时看起来应该像这样:

.selector {
  grid-area: row-start / col-start / row-end / col-end;
}

如果你难以记住这些值的正确顺序,只需记住,你必须先指定元素左上方的位置( row-startcol-start ) ,然后是右下角的位置 ( row-endcol-end )。

就像前面的例子,把项目C放到网格的右下角,我们可以使用下面的CSS: 

.c {
  grid-area: 2 / 2 / 4 / 4;
}

阅读SitePoint 的文笔Using grid-area(@SitePoint) 在 CodePen上.

第 5 段(可获 1 积分)

 

#4 使用span关键字

CSSGrid-Example Using the span Keyword with Grid Lines

取代当我们布局元素时指定线的终点,你也可以用span关键字设置列号或行号来跨越特定的元素。

这是使用span关键字的正确语法:

.selector {
  grid-row: row-start / span row-span-value;
  grid-column: col-start / span col-span-value;
}

如果你的元素只跨越一行或一列,那么你可以省略span 关键字和它的值。

这时我们要把项目C在网格的左上角,我们可以用下面的CSS。

第 6 段(可获 1.06 积分)
.c {
  grid-row: 1 / span 2;
  grid-column: 1 / span 2;
}

参考SitePoint (@SitePoint)在CodePen发表的 Pen  使用带网格线的span 。

 

#5 使用命名的线

CSSGrid-Example with Named Lines

直到现在,我们已经使用原始数字来指定网格线,并且当我们使用简单的布局时它很容易使用。 然而,当你必须放置几个元素时,它可能会有点混乱。 大多数情况下,您的网页上的元素将属于特定类别。 例如,头部可以从列线c1到列线c2以及从行线r1到行线r2。 这将更容易正确命名所有的行,然后使用这些名称放置您的元素,而不是数字。

第 7 段(可获 1.41 积分)

让我们创建一个非常基本的布局,使概念更清晰。首先,我们需要修改应用到我们的网格容器的CSS。

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [head-col-start] 180px [content-col-start] 180px [content-col-mid] 180px [head-col-end];
  grid-template-rows: [head-row-start] auto [head-row-end] auto [content-row-end] auto [footer-row-end];
}

上面我所做的,是根据它们将包含的内容类型对所有行分配名称。这里的想法是,使用名称可以为我们提供对不同元素的摆放的一些理解。在这个特定的例子中,我们的头元素跨越所有的列。因此,分配名称“head-col-start”和“head-col-end”各自作为第一个和最后一个列边线,会很清楚地显示出这些边线代表了头元素最左和最右端。所有其他的线可以通过同样的形式定义。在所有的线被命名后,我们可以用下面的CSS来放置所有元素。

第 8 段(可获 1.71 积分)
.header {
  grid-column: head-col-start / head-col-end;
  grid-row: head-row-start / head-row-end;
}

.sidebar {
  grid-column: head-col-start / content-col-start;
  grid-row: head-row-end / content-row-end;
}

.content {
  grid-column: content-col-start / head-col-end;
  grid-row: head-row-end / content-row-end;
}

.footer {
  grid-column: head-col-start / head-col-end;
  grid-row: content-row-end / footer-row-end;
}

虽然我们不得不编写比平常更多的CSS,但是现在只用看看CSS我们就可以知道一个元素的位置了。

第 9 段(可获 0.33 积分)

参考 CodePen 上 Using Named Lines 案例,作者为 SitePoint (@SitePoint)。

 

#6 使用带有通用名称的命名边线,以及 span 关键字

CSSGrid-Example with Named Lines and the span Keyword

在前面的方法中,所有的线有不同的名字,标记了元素的起始点、中间点或末端点。 比如, “content-col-start” and “content-col-mid” 标记了我们网页内容部分的起始和中间点。如果内容部分包含更多行,我们需要起额外的线名,如“content-col-mid-one”, “content-col-mid-two” 等。

在这样的情况下,我们可以为我们内容部分的所有的网格线使用一个常用的名字,如 “content”,  然后使用 span 关键字来指定一个元素跨越多少这样的线。我们也可以仅仅提供线名和一个数字,来设置一个元素跨越的行数和列数。

第 10 段(可获 1.8 积分)

使用这种方法,CSS看起来像这样:

.selector {
  grid-row: row-name row-start-number/ row-name row-end-number;
  grid-column: col-name col-start-number / span col-name col-to-span;
}

像最后一个方法,这一个也需要你修改网格容器的CSS。

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [one-eighty] 180px [one-eighty] 180px [one-eighty] 180px;
  grid-template-rows: [head-row] auto [content-row] auto [content-row] auto [content-row] auto [footer-row] auto;
}

每个命名的列线具有相同的名称,表示它们的宽度(以像素为单位),每个命名的行线表示由网页的特定部分覆盖的行。 在这个演示中,我在侧边栏下面引入了一个放置广告的部分。 这里是CSS:

第 11 段(可获 0.93 积分)
.header {
  grid-column: one-eighty 1 / one-eighty 4;
  grid-row: head-row / content-row 1;
}

.sidebar {
  grid-column: one-eighty 1 / one-eighty 2;
  grid-row: content-row 1 / content-row 2;
}

.advert {
  grid-column: one-eighty 1 / one-eighty 2;
  grid-row: content-row 2 / content-row 3;
}

.content {
  grid-column: one-eighty 2 / one-eighty 4;
  grid-row: content-row 1 / span content-row 2;
}

.footer {
  grid-column: one-eighty 1 / span one-eighty 3;
  grid-row: content-row 3 / footer-row;
}

参考SitePoint (@SitePoint)在CodePen发表的 Pen 使用 Named Lines 和 Span

第 12 段(可获 0.16 积分)

 

#7 使用命名的网格区域

CSSGrid-Example with Named Grid Areas

我们可以不使用线,而是通过为不同区域指定名字来放置元素。我们再次需要改动我们网格容器的CSS。

CSS 现在是这个样子:

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 180px  180px  180px;
  grid-template-areas:  "header  header   header"
                        "content content  advert"
                        "content content  ......"
                        "footer  footer   footer";
}

一个点(.)或者一个点的序列会创建一个空的单元格。所有的串需要有同样数量的列。这就是为什么我们需要增加点,而不是留空白。现在,命名的网格区域只能是矩形。但是,这在未来版本的规范中可能会改变,我们来看看我们所有元素的CSS。

第 13 段(可获 1.5 积分)
.header {
  grid-area: header;
}

.content {
  grid-area: content;
}

.advert {
  grid-area: advert;
}

.footer {
  grid-area: footer;
}

一旦你定义了所有网格区域,将它们分配给不同的元素就非常直观了。记住你在为区域指定名字时不能使用任何特殊字符,否则声明会无效。

CodePen 上查看示例 Using Named Grid Areas ,作者为SitePoint (@SitePoint)。

总结

本文到此为止!我们覆盖了7种不同的使用CSS来部署元素的方法。关于本文,你有任何希望与我们的读者分享的想法吗?在你自己的项目中,你更倾向于使用其中的哪种方法?请在评论区发表观点。

第 14 段(可获 1.31 积分)

文章评论

阿星
我以为翻译完了呢