CSS 网格布局简介:第 1 部分

88 阅读5分钟

这是开始使用 CSS 网格布局的两部分系列文章中的第一篇文章。如果您有兴趣了解有关 CSS 网格和 Firefox 中新的 CSS 网格布局功能的更多信息,请访问Firefox DevTools Playground

CSS Grid Layout 彻底改变了网页设计的游戏规则。它允许我们使用简单的 CSS 在 Web 上创建复杂的布局。

“可是等等!我已经可以使用浮动/表格/框架创建布局。”

确实如此,但CSS Grid Layout是 CSS 原生的二维网格系统。它是一种网络标准,就像 HTML 一样,适用于所有现代浏览器。使用 CSS 网格布局,您可以为网络创建精确的布局。您可以构建有序的列和行,或巧妙地重叠内容区域来创建令人惊叹的新设计。

准备好?让我们开始吧。

在我们深入研究 CSS 网格概念之前,让我们先了解一些基本术语。

术语

网格线 划分网格并分隔列和行的垂直线和水平线。 img

网格单元 CSS 网格的单个单元。 img

网格区域 由四条网格线包围的矩形空间。一个网格区域可以包含任意数量的网格单元。 img

网格轨迹 两条网格线之间的空间。这个空间可以是水平的或垂直的 img

网格行 网格 的水平轨道。 img

网格列 网格 的垂直轨道。 img

注意:如果您使用垂直书写模式,行和列会切换。

Gutter 网格中行和列之间的空间。 img

网格容器 包含整个 CSS 网格的容器。它将是具有display: gridordisplay: inline-grid属性的元素。

网格项 作为网格容器的直接子元素的任何元素。

…知道了?现在让我们继续使用 CSS 网格布局创建我们的第一个网格。

创建网格

我们要做的第一件事是创建一个网格容器。我们可以通过display: grid在容器元素上声明来做到这一点。在这个例子中,我们使用了一个容器类的 div。

定义行和列

有多种方法可以定义行和列。对于我们的第一个网格,我们将使用属性grid-template-columnsgrid-template-rows。这些属性允许我们为网格定义行和列的大小。要创建一个网格,其中前两行的固定高度为 150px,前三列的固定宽度为 150px,只需编写:

grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;

要将第四列设置为 70px 宽,请编写:

grid-template-columns: 150px 150px 150px 70px;

...等等以添加更多列。

注意:在上面的例子中,我们定义了一个3×2的显式网格。如果我们在定义的网格之外放置一些东西,那么 CSS 网格布局将在隐式网格中创建这些行和列。本教程不涉及隐式网格,但请查看 MDN上的这篇文章以了解有关隐式和显式网格的更多信息。

添加排水沟

使用 CSS Grid Layout 向您的网格添加装订线非常容易。只需添加:

grid-gap: 1rem;

这行简单的代码为您提供了所有行和列之间大小相等的间隔。要单独定义列和行的装订线大小,您可以改用grid-column-gapgrid-row-gap属性。

现在让我们把它们放在一起。这是我们的 HTML:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

只需几行 CSS,我们就可以创建一个简单的网格:

.container {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px;
  grid-gap: 1rem;
}

结果如下:

fr 单位

创建具有固定 px 宽度的网格很棒,但它不是很灵活。值得庆幸的是,CSS Grid Layout 引入了一个新的长度单位,称为分数 的fr缩写。MDN 将 fr 单位定义为代表网格容器中可用空间的一小部分的单位。如果我们想将之前的网格重写为具有三个等宽的列,我们可以更改 CSS 以使用 fr 单元:

.container {
  display: grid;
  width: 800px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 150px 150px;
  grid-gap: 1rem;
}

repeat() 符号

实用提示:如果您发现自己重复长度单位,请使用 repeat() 表示法。像这样重写上面的代码:

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 150px);
  grid-gap: 1rem;
}

结果如下:

声明轨道尺寸时,您可以使用固定尺寸,单位为 px 和 em。您还可以使用灵活的大小,例如百分比或 fr 单位。然而,CSS Grid Layout 的真正魔力在于混合这些单元的能力。最好的理解方法是举个例子:

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 100px 30% 1fr;
  grid-template-rows: 200px 100px;
  grid-gap: 1rem;
}

在这里,我们声明了一个包含三列的网格。第一列固定宽度为 100px。第二列将占用可用空间的 30%,第三列是 1fr,这意味着它将占用可用空间的一小部分。在这种情况下,它将占用所有剩余空间(1/1)。

这是我们的 HTML:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

结果如下:

您可以访问我们的Playground以获取有关如何开始使用 CSS 网格布局的完整指南,或者在开始之前查看第 2 部分。如果您准备深入研究 CSS 网格布局,请查看MDN 上优秀指南