网格布局每个网格都能放置一个组件_使用CSS网格布局放置元素的7种方法

Python部落(python.freelycode.com)组织翻译，禁止转载，欢迎转发。

这篇文章中，我们将要学习在一个网页中使用CSS网格布局放置元素的7种方法。

前一段时间，SitePoint网站发表了《CSS格网布局介绍》这篇文章。最近，我也写了篇文章叫作《详解CSS格网布局工作草案》

这篇文章中，使用CCS格网布局网页元素的具体方法将完全成为其重点。现在，让我们浏览其中的每一种方法。

解决浏览器对格网布局的支持

之前，格网布局还没有固定的浏览器支持。但在2017年3月之后，最新版本的谷歌和火狐浏览器则默认支持CSS格网布局。IE仍然只支持旧的版本，Opera需要启动“实验网络平台”选项，Safari目前还不支持。为了实现这篇文章中的所有例子，我建议读者使用谷歌或者火狐浏览器。为了照顾由于某些原因不能使用上述两种浏览器的的读者，我会在文章中加入每种方法最终结果的截图。

#1根据单个属性指定所有元素

这是我们之前文章中用于布置元素的版本，这种方法比较繁琐但是容易理解。基本上，使用grid-column-start/grid-column-end 和 grid-row-start/grid-row-end 属性指定一个元素的左/右和上/下边界。如果一个元素仅跨越一行或者一列，你可以省略-end 属性，这种方法需要写的CSS代码少一点。在上面的示例中，将元素A放置在第二行第二列的CSS代码如下：

通过如下代码也可以达到同样的效果：

#2使用grid-row和grid-column

尽管第一个例子中的CSS代码可读性强且容易理解，但我们要使用4个不同的属性来放置一个元素。除了使用4个属性，我们可以只使用2个— grid-column 和grid-row。这些属性将由右斜杠分为2个值，第1个值决定了元素的起始线，第2个值决定了终点线。

下面是使用这些属性的具体语法：

将对象C放置在格网的右下角，应该使用下面的CSS语句：

#3使用grid-area

技术上讲，我们布置的对象覆盖网页上一个特定的区域，其边界取决于提供给格网线的具体数据。然而，所有这些数据都可以由 grid-area 属性一次提供。下面是使用该属性的CSS语法：

如果你在记忆这些数字顺序上有困难，那么你仅需要记住元素左上角( row-start – col-start )和右下角( row-end – col-end )的具体位置即可。与之前的例子类似，将对象C放置在格网的右下角，可以采用下面的CSS代码：

#4使用关键字span

在布置元素时除了指定终线，还可以使用关键字span设定一个特定元素跨越的行数或者列数。

下面是使用span关键字的正确语法：

如果你的元素只跨越1个行或者列，你可以省略关键字span和其数值。

这次我们把对象C放置在格网的左上角，下面的CSS代码可以实现这样的功能：

#5使用命名的线

目前，我们使用具体数字来指定格网线，这种方式在简单布局中使用很方便。但是，如果放置多个元素就会让人有点混乱。大多数情况下，网页中的一个元素会落入特定的范围。例如，上图Header元素的范围从列线c1到c2，从行线r1到r2。如果将某个元素范围由命名的线来确定，而不是具体数字，这样会给开发者带来极大便利。

这里我们创建一个非常基本的布局，方便读者更加清晰地理解上面的概念。首先，我们需要修改应用于格网容器的CSS代码：

在上述代码中，需要基于每个元素的类型为包围它的所有线分配名字。这里的想法是，通过使用名字让大家深刻理解不同元素的放置方法。在这个特别的例子中，header元素跨越了所有列。因此，将“head-col-start”和“head-col-end”两个名字分配给第一列和最后一列，这样很明显就能看出这两列分别代表header元素的最左侧和最后侧。所有其它线都可以用类似的规则命名。当所有线都被命名后，就可以用以下CSS代码放置所有元素：

尽管对比平常，上述方式需要编写更多CSS代码，但是它可以让我们清楚每一个元素的具体位置。

#6使用通用名命名的线和关键字span

在上面的方法中，所有线都有不同名字，用来标记一个元素的起始、中间和终点。例如，“content-col-start”和“content-col-mid”代表网页内容章节的起始和中间点。如果内容章节占据了再多一些行，就需要使用其它线，如“content-col-mid-one”、“content-col-mid-two”等等。

若出现如下的情况：如果仅有类似“content”的通用名，可供内容章节的所有格网线使用，就可以使用关键字“span” 再来细化一个元素具体跨越几条线。同时，还可以为线名加上具体数字，来设定一个元素跨越的行数或者列数。

和上一种方法一样，这里的方法也要求修正grid容器的CSS代码：

每个命名的列线都有同样的名字代表其像素宽，每个命名的行线则代表了网页中具体章节覆盖的行。在这个例子中，我提出了在sidebar之下的advertisement章节，下面是具体CSS代码：

#7使用命名的格网区域

除了使用命名线，还可以通过将名字分配到不同区域来放置元素。一样的，我们还需要对grid容器的的CSS代码做一些改动。

除了使用命名线，还可以通过将名字分配到不同区域来放置元素。一样的，我们还需要对grid容器的的CSS代码做一些改动。

具体的CSS代码如下：

用单独的点(.)或者一系列点可以创建一个不包含任何内容的空单元。所有的字符串都需要占据同样的列数，所以我们用一系列点来代替空字符。目前，命名的格网区域必须是矩形，但是未来的版本应该会有所改变。下面就是所有元素CSS代码：

一旦你定义了所有格网区域，将它们分配给不同的元素就很简单了。但一定要记住，分配这些名字给不同区域时一定不能使用特殊字符，这样会让上述声明非法。

总结

我们介绍了使用CSS格网布局布置元素的7种方法，关于这篇文章你有什么观点要和其他读者分享么？你会选择哪种方法在你的工程中？请在下面的留言中告诉我。

英文原文：https://www.sitepoint.com/seven-ways-you-can-place-elements-using-css-grid-layout/

译者：zfzf1236