这是关于 CSS 网格布局入门系列文章的第二篇。如果您有兴趣深入了解 CSS 网格以及 Firefox DevTools 中的全新 CSS 网格布局功能，请访问 Firefox DevTools Playground。

了解网格线

如果您已阅读 第一部分，您应该已经熟悉创建网格和定义行和列大小。现在我们可以开始将项目放置到网格中。有多种方法可以放置项目，但我们将从一个基本示例开始。考虑一个包含六个项目的网格

此网格中的每个项目都将以默认顺序自动放置。

如果我们希望获得更大的控制权，我们可以使用网格线号将项目定位到网格上。网格线从左到右、从上到下编号（如果您使用的是从右到左的语言，则网格线从右到左编号）。上面的示例将按以下方式编号

定位项目

以下是我们将用于此示例的 HTML 代码

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>

假设我们想要将第一个网格项目（类名为 item1）定位到第二行并占用第二列。此项目需要从第二行线开始，并跨越到第三行线。它还需要从第二列线开始，并跨越到第三列线。我们可以这样编写 CSS 代码

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

简写属性

我们也可以使用简写属性重写这段代码

.item1 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

以下是结果

查看 Pen CSS 网格布局 - 定位项目 by Mozilla Developers (@mozilladevelopers) on CodePen.

创建基本布局

现在我们已经基本了解了如何定位项目，我们可以创建一个基本布局。让我们使用三种不同的方法来创建相同的布局。

方法 1：定位项目

对于我们的第一种布局方法，我们不会引入任何新概念。我们将简单地使用 `grid-row` 和 `grid-column` 简写属性来手动放置项目，例如标题、页脚等。

以下是 HTML 代码

<div class="container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content-1">Content-1</div>
  <div class="content-2">Content-2</div>
  <div class="content-3">Content-3</div>
  <div class="footer">footer</div>
</div>

以下是 CSS 代码

.container {
  display: grid;
  width: 750px;
  height: 600px;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
}

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

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

.content-1 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}

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

.content-3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

.footer {
  grid-row: 4 / 5;
  grid-column: 1 / 4;
}

以下是结果

查看 Pen CSS 网格布局 - 基本布局 by Mozilla Developers (@mozilladevelopers) on CodePen.

快速提示：如果您使用的是 Firefox Quantum，您可以尝试使用 Firefox CSS 网格布局面板上的“显示行号”设置。检查上面的结果并选择布局面板。在这里，您可以激活网格叠加层并选中“显示行号”框。方便吧？此工具使在定位项目时可视化网格变得非常容易。您需要使用 Firefox Quantum 才能访问此功能。还没有 Quantum？在这里下载 Firefox Quantum 开发者版。

方法 2：命名线

定位项目的另一种方法是使用 `grid-template-areas` 和 `grid-area` 属性来命名网格区域。解释这一点的最佳方法是通过示例。让我们使用 `grid-template-areas` 属性重新创建我们之前示例中的网格

.container {
  display: grid;
  width: 100%;
  height: 600px;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
  grid-template-areas:
  "header header header"
  "sidebar content-1 content-1"
  "sidebar content-2 content-3"
  "footer footer footer";
}

在这里，我们定义了三列和四行。我们无需放置每个单独的项目，而是可以使用 `grid-template-areas` 属性定义整个布局。然后，我们可以使用 `grid-area` 属性将这些区域分配给每个网格项目。

我们的 HTML 代码

<div class="container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content-1">Content-1</div>
  <div class="content-2">Content-2</div>
  <div class="content-3">Content-3</div>
  <div class="footer">footer</div>
</div>

我们的 CSS 代码其余部分

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.content-3 {
  grid-area: content-3;
}

.footer {
  grid-area: footer;
}

以下是结果

查看 Pen CSS 网格布局 - 模板区域 by Mozilla Developers (@mozilladevelopers) on CodePen.

快速提示：您知道 FireFox DevTools 可以显示区域名称吗？试试吧！检查上面的网格并打开布局面板。从这里，您可以切换网格叠加层和“显示区域名称”功能。您需要使用 Firefox Quantum 才能访问此功能。您需要使用 Firefox Quantum 才能访问此功能。还没有 Quantum？在这里下载 Firefox Quantum 开发者版。

方法 3：命名线

我们通过为 `grid-column` 和 `grid-row` 属性提供特定的网格线来将项目放置到网格中。我们也可以在定义网格时为部分或所有网格线命名。这使我们能够使用这些名称代替网格线。

要为网格线命名，我们只需在方括号中提供名称即可

.container {
  display: grid;
  width: 100%;
  height: 600px;
  grid-gap: 1rem;
  grid-template-columns:
  [main-start sidebar-start] 200px
  [sidebar-end content-start] 1fr
  [column3-start] 1fr
  [content-end main-end];
  grid-template-rows:
  [row1-start] 80px
  [row2-start] 1fr
  [row3-start] 1fr
  [row4-start] 100px
  [row4-end];
}

现在我们已经有了行名，我们可以在放置项目时使用这些名称。让我们使用命名线而不是行号来重新创建我们的基本布局

.header {
  grid-column: main-start / main-end;
  grid-row: row1-start / row2-start;
}

.sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: row2-start / row4-start;
}

.content-1 {
  grid-column: content-start / content-end;
  grid-row: row2-start / row3-start;
}

.content-2 {
  grid-column: content-start / column3-start;
  grid-row: row3-start / row4-start;
}

.content-3 {
  grid-column: column3-start / content-end;
  grid-row: row3-start / row4-start;
}

.footer {
  grid-column: main-start / main-end;
  grid-row: row4-start / row4-end;
}

以下是我们的 HTML 代码

<div class="container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content-1">Content-1</div>
  <div class="content-2">Content-2</div>
  <div class="content-3">Content-3</div>
  <div class="footer">footer</div>
</div>

以下是结果

查看 Pen CSS 网格布局 - 命名线 by Mozilla Developers (@mozilladevelopers) on CodePen.

快速提示：您知道您可以在 Firefox DevTools 中自定义网格叠加层颜色吗？上面的示例是在白色背景上，默认的紫色可能不是最佳颜色。选择要显示的网格叠加层时，您会在网格名称旁边看到一个圆圈，表示叠加层的颜色。单击该圆圈，您可以根据自己的喜好自定义颜色。尝试其他颜色，例如红色。您需要使用 Firefox Quantum 才能访问此功能。还没有 Quantum？在这里下载 Firefox Quantum 开发者版。

关于 CSS 网格布局入门的介绍就到这里。您可以访问我们的 playground，获取有关 CSS 网格布局入门指南的完整说明。如果您已准备好更深入地了解 CSS 网格布局，请查看 MDN 上的优秀指南。CSS 网格布局彻底改变了 Web 设计的游戏规则。它使我们能够使用简单的 CSS 代码在 Web 上创建复杂的布局。第二部分 CSS 网格布局