CSS 网格布局简介：第 2 部分

coderklaus
458 阅读5分钟

了解网格线

如果您已经阅读了第 1 部分，那么您现在应该可以轻松地创建网格并定义行和列的大小。我们现在可以继续在网格上放置项目。放置物品的方法有多种，但我们将从一个基本示例开始。考虑一个包含六个项目的网格：

img

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

如果我们希望有更大的控制，我们可以使用网格线编号在网格上定位项目。网格线从左到右和从上到下编号（如果您使用从右到左的语言，则网格线从右到左编号）。上面的例子将像这样编号：

img

放置一个项目

这是我们将用于此示例的 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;
}

结果如下：

创建基本布局

现在我们对如何放置项目有了基本的了解，我们可以创建一个基本的布局。让我们使用三种不同的方法创建相同的布局。

方法一：定位物品

对于我们的第一种布局方法，我们不会引入任何新概念。我们将简单地使用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;
}

结果如下：

快速提示：如果您使用的是 Firefox Quantum，您可以在 Firefox CSS 网格布局面板上尝试“显示行号”设置。检查上面的结果并选择布局面板。您可以在此处激活覆盖网格并选中“显示行号”框。好用吧？这个工具可以很容易地在定位项目时可视化您的网格。您需要使用 Firefox 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;
}

结果如下：

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

方法 3：命名行

我们通过提供grid-column和grid-row properties特定的网格线在网格上放置了一个项目。我们还可以在定义网格时命名部分或全部这些网格线。这允许我们使用这些名称而不是网格线。

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

.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>

结果如下：

快速提示：您知道可以在 Firefox DevTools 中自定义网格覆盖的颜色吗？上面的例子是在白色背景上，默认的紫色可能不是最好的颜色。选择要显示的叠加网格时，您将在网格名称旁边看到一个圆圈，指示叠加的颜色。单击该圆圈，您可以根据需要自定义颜色。尝试不同的颜色，例如红色。您需要使用 Firefox Quantum 才能访问此功能。还没有量子？在此处下载Firefox Quantum 开发人员版。

这是 CSS 网格布局入门的总结。您可以访问我们的游乐场以获取有关如何开始使用 CSS 网格布局的完整指南。如果您准备深入研究 CSS 网格布局，它会彻底改变网页设计的游戏规则。它允许我们使用简单的 CSS 在 Web 上创建复杂的布局。第 2 部分 CSS 网格布局，查看MDN 上的优秀指南。

avatar
文章
阅读
粉丝