您可以使用CSS网格布局放置元素的七种方式-IT业界-PHP中文网

CSS Grid布局和Flexbox有什么区别？

如何使用CSS Grid创建响应式布局？

我可以同时使用CSS Grid和Flexbox吗？

如何在CSS Grid中对齐项目？

CSS Grid布局中的网格线是什么？

如何在网格项目之间创建间隙？

CSS Grid中的“grid-template-areas”属性是什么？

如何在CSS Grid中重叠网格项目？

CSS Grid中的“fr”单位是什么？

CSS Grid在现代浏览器中得到广泛支持吗？

首页

科技周边

IT业界

您可以使用CSS网格布局放置元素的七种方式

Christopher Nolan

Feb 17, 2025 am 10:20 AM

七种使用CSS Grid布局网页元素的方法

Seven Ways You Can Place Elements Using CSS Grid Layout

(本文于2017年3月23日更新。具体内容：CSS Grid布局的浏览器支持)

本文将介绍七种使用Grid Layout模块在网页中放置元素的方法。

SitePoint之前发表过《CSS Grid Layout简介》。最近，我还写了《CSS Grid Layout工作草案的现状》。

这里，重点将完全放在使用CSS Grid在网页上布局元素的具体方法上。现在，让我们逐一介绍它们。

关键要点

CSS Grid Layout允许使用多种方法在网页上灵活地放置元素，例如单个属性、grid-row和grid-column、grid-area、span关键字、命名线、具有公共名称和span关键字的命名线以及命名网格区域。
grid-area属性允许指定元素的左上角和右下角，而span关键字可用于设置元素将跨越的列数或行数。
命名线有助于组织复杂的布局，每条线都根据其将包含的内容类型分配一个名称。可以通过为特定部分的所有网格线使用公共名称并使用span关键字指定元素跨越的这些线条的数量来进一步简化此过程。
命名网格区域允许为不同区域分配名称，而不是使用线条，从而使元素分配变得简单明了。但是，命名网格区域目前只能是矩形。

CSS Grid布局的浏览器支持

目前，Grid Layout还没有一致的浏览器支持。但是，截至2017年3月，Chrome和Firefox浏览器的最新版本默认都已支持CSS Grid Layout。IE仍然支持旧的实现，Opera需要启用实验性Web平台标志，而Safari则完全不支持。为了正确使用本文中的所有示例，建议您使用Chrome或Firefox。对于由于某种原因发现使用这些浏览器存在问题的读者，我已经添加了屏幕截图以显示每种技术的最终结果。

方法一：使用单个属性指定所有内容

Seven Ways You Can Place Elements Using CSS Grid Layout 这是我们之前文章中一直用来放置元素的版本。此方法冗长但易于理解。基本上，使用grid-column-start/grid-column-end和grid-row-start/grid-row-end属性指定元素的左右和上下边界。如果元素只跨越一行或一列，您可以省略-end属性，这样您就需要编写更少的CSS。

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

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

登录后复制

可以使用以下方法实现相同的效果：

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

登录后复制

CodePen演示链接

方法二：使用grid-row和grid-column

Seven Ways You Can Place Elements Using CSS Grid Layout 尽管我们第一个示例中的CSS可读且易于理解，但我们必须使用四个不同的属性来放置单个元素。我们可以只使用两个属性（grid-column和grid-row）而不是四个属性。这两个属性都将采用以斜杠分隔的两个值，其中第一个值将确定元素的起始线，第二个值将确定元素的结束线。

以下是您需要使用这些属性的语法：

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

登录后复制

要将项目C放置在网格的右下角，我们可以使用以下CSS：

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

登录后复制

CodePen演示链接

方法三：使用grid-area

Seven Ways You Can Place Elements Using CSS Grid Layout 从技术上讲，我们正在布局的项目占据了网页的特定区域。该项目的边界由我们为网格线提供的值确定。可以使用grid-area属性一次提供所有这些值。

以下是使用此属性时的CSS外观：

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

登录后复制

如果您难以记住这些值的正确顺序，只需记住首先必须指定左上角（row-start - col-start）角，然后指定元素的右下角（row-end - col-end）角。

与前面的示例一样，要将项目C放置在网格的右下角，我们可以使用以下CSS：

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

登录后复制

CodePen演示链接

方法四：使用span关键字

Seven Ways You Can Place Elements Using CSS Grid Layout 在布局元素时，除了指定结束线外，还可以使用span关键字来设置特定元素将跨越的列数或行数。

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

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

登录后复制

如果您的元素只跨越一行或一列，您可以省略span关键字及其值。

这次让我们将项目C放置在网格的左上角。我们可以使用以下CSS来做到这一点。

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

登录后复制

CodePen演示链接

方法五：使用命名线

Seven Ways You Can Place Elements Using CSS Grid Layout 到目前为止，我们一直在使用原始数字来指定网格线，当我们处理简单的布局时，它很容易使用。但是，当您必须放置多个元素时，它可能会有点混乱。大多数情况下，页面上的元素将属于特定类别。例如，页眉可能从列线c1到列线c2，从行线r1到行线r2。对所有线条进行正确命名，然后使用这些名称而不是数字来放置元素会容易得多。

让我们创建一个非常基本的布局来使概念更清晰。首先，我们必须修改应用于网格容器的CSS：

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

登录后复制

我在上面所做的是根据它们将包含的内容类型为所有线条分配名称。这里的想法是使用能让我们了解不同元素位置的名称。在这个特定示例中，我们的页眉元素跨越所有列。因此，分别为第一列线和最后一列线分配名称“head-col-start”和“head-col-end”将清楚地表明这些线代表页眉的左右端。所有其他线条都可以以类似的方式命名。在所有线条命名之后，我们可以使用以下CSS来放置所有元素。

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

登录后复制

尽管我们必须编写比平时更多的CSS，但现在只需查看CSS就能了解元素的位置。

CodePen演示链接

方法六：使用具有公共名称和span关键字的命名线

Seven Ways You Can Place Elements Using CSS Grid Layout 在前面的方法中，所有线条都有不同的名称，标记元素的起始点、中点或结束点。例如，“content-col-start”和“content-col-mid”标记了我们网页内容部分的起始点和中点。如果内容部分覆盖了更多行，我们将不得不提出其他行名，例如“content-col-mid-one”、“content-col-mid-two”等等。

在这种情况下，我们可以为内容部分的所有网格线只使用一个公共名称，例如“content”，然后使用span关键字来指定元素跨越的这些线条的数量。我们也可以只在行名旁边提及一个数字来设置元素将跨越的行数或列数。

使用此方法，CSS 将如下所示：

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

登录后复制

与最后一种方法一样，此方法也要求您修改网格容器的CSS。

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

登录后复制

每个命名的列线都具有相同的名称，表示它们的宽度（以像素为单位），每个命名的行线都表示特定网页部分所覆盖的行。在此演示中，我在侧边栏下方引入了一个广告部分。这是CSS：

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

登录后复制

CodePen演示链接

方法七：使用命名网格区域

Seven Ways You Can Place Elements Using CSS Grid Layout 我们可以通过为不同区域分配名称来放置元素，而不是使用线条。同样，我们必须对网格容器的CSS进行一些更改。

网格容器的CSS现在应该如下所示：

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

登录后复制

单个点（.）或一系列点将创建一个没有任何内容的空单元格。所有字符串都必须具有相同数量的列。这就是为什么我们必须添加点而不是完全留空的原因。目前，命名网格区域只能是矩形。但是，这可能会在规范的未来版本中发生变化。让我们看一下所有元素的CSS。

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

登录后复制

定义所有网格区域后，将它们分配给各种元素非常简单。请记住，在为区域分配名称时，您不能使用任何特殊字符。这样做会使声明无效。

CodePen演示链接

结论

就是这样！我们已经介绍了七种使用CSS网格布局来布局元素的不同方法。您想与其他读者分享关于本文的任何技巧吗？您更喜欢在自己的项目中使用哪种方法？请在评论中告诉我们。

CSS Grid布局常见问题解答

CSS Grid布局和Flexbox有什么区别？

CSS Grid布局和Flexbox都是CSS中强大的布局系统。虽然它们看起来很相似，但它们是为不同类型的布局任务而设计的。Flexbox是一种一维布局模型，它设计用于一次在一个维度上进行布局，要么是一行，要么是一列。另一方面，CSS Grid布局是一个二维系统，这意味着它可以同时处理列和行，这使其成为设计复杂网页布局的理想选择。