CSS 网格简介：你应该知道的内容

我第一次听说 CSS Grid 是在 2016 年底。当时我参加了我人生中第一次参加的Tech Ladies会议，一位与会者告诉我它有多棒。一年半过去了，我终于开始深入研究 Grid 了。作为一名忠实的 Flexbox 用户，我已经能预见到它将如何改变游戏规则。

我开始学习 CSS Grid 时最大的疑问是：Grid 和 Flexbox 有什么不同？我发现，通常情况下，Flexbox 能做的所有事情，Grid 都能做到。有些人认为 Grid 适合多维布局，而 Flexbox 应该用于一维布局。但其实 Grid 在一维布局方面也表现出色——尤其是在你之后回过头来决定要将一维布局变成多维布局的时候。

设置 CSS 网格

网格的设置极其简单——只需要两行 CSS。

HTML

<div class=”wrapper”>
  <div class=”item”>1</div>
  <div class=”item”>2</div>
  <div class=”item”>3</div>
  <div class=”item”>4</div>
  <div class=”item”>5</div>
  <div class=”item”>6</div>
</div>

CSS

.wrapper {
    display: grid;
    grid-template-columns: 10rem 10rem 10rem;
}

瞧！你有一个网格了。真的，这就是你所需要的一切。太棒了。

你会注意到，与将 Flexbox 设置为 不同display: flex，添加display: grid到包装器并不会立即产生影响。这是因为你没有明确定义网格的列数。你可以grid-template-columns像我上面那样使用 来执行此操作。因此，在此示例中，我将三列设置为每列宽度为 10rem。

设置时，你可以使用任何你想要的值grid-template-columns，但我建议不要使用百分比，除非你想加到 100%。这是因为你必须考虑到你的金额grid-gap（我们稍后会深入讨论），这可能会有点棘手。

显式与隐式轨道

在讨论显式和隐式轨道之前，我们先来了解一下什么是轨道。轨道是两条水平或垂直网格线之间的空间。在 CSS 网格中，我们不需要单独计算行和列，而是通过轨道线来计算。这是我们开始使用的网格——为了方便您查看，我给所有轨道的行和列都做了编号。

你可以看到我们实际上有四条列线和三条行线。这将有助于你将项目放置在网格上。

补充说明一下：如果你使用的是 Firefox，它实际上有一些很棒的开发工具可以查看列和行轨道编号。如果你检查你的包装器元素，然后转到布局选项卡，勾选包装器对应的复选框，你的网格现在看起来就会像下面这样！ 我真心希望 Chrome 以后能添加类似的检查功能。这太有用了。Chrome 现在也在其开发工具中添加了此功能。

让我们回顾一下显式轨道和隐式轨道之间的区别。如果我们回顾上面的代码，你会注意到我们只设置了列。在本例中，我们显式地将列设置为三列，但隐式地设置了行。我们有六个项目，但显然，所有这些项目无法容纳在三列中，因此隐式地设置了第二行。

这有点令人困惑，所以我绝对建议你自己尝试一下 CSS Grid 来了解显式和隐式轨道之间的区别。

添加网格间隙

网格间隙类似于边距，只不过它只会添加到网格项之间，而不会添加到网格外部。我遇到过很多情况，当我在 Flexbox 网格中添加边距时，不得不在网格的包装器中设置相同大小的负边距，以抵消网格外部设置的边距。幸运的是，使用 CSS 网格，你无需处理这个问题。

让我们以上面的示例 CSS 为例，并添加一些网格间隙。

.wrapper {
  display: grid;
  grid-template-columns: 10rem 10rem 10rem;
  grid-gap: 1rem;
}

我使用了简写属性，但您可以使用和grid-gap为列和行定义一个明确的值。grid-column-gapgrid-row-gap

*笔记： Chrome 66 将更grid-gap改为gap和grid-column-gap/grid-row-gap至column-gap/ row-gap。除 IE 之外的所有浏览器现在都支持使用gapand column-gap/ row-gap. *

Repeat() 函数

当使用三列等宽布局时，定义每列的宽度grid-template-columns非常简单。但如果需要更多列，则需要输入大量代码。这时，repeat()函数就派上用场了。

这是我们使用的repeat()添加了该功能的示例。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 10rem);
  grid-gap: 1rem;
}

正如您在 CSS 中看到的，我将三列设置为每列 10rem 宽。这个网格看起来与我们grid-gap示例中的网格完全一样。使用这个repeat()函数，我们可以让代码更简洁，并且在需要设置大量列时更易于阅读。

分数单位

分数单位（fr）是 CSS Grid 引入的一个新 CSS 长度单位，我经常会用到它。假设我们想要三列宽度相等，width: calc(100% / 3)我们可以使用分数单位，而不是直接在项目上设置。可以把分数单位想象成“自由空间”。

让我们继续使用我们一直在使用的示例。

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

你会注意到，我唯一改变的是grid-template-columns。我现在告诉浏览器我想要三列，并且我希望每列占用一个小数单位或一个“可用空间”。这和 Flexbox 的 flex-grow 属性非常相似。

每个项目比上一个示例略宽的原因是，它们现在尽可能地占据空间，同时仍然能容纳三列。在本例中，我没有设置固定宽度，所以它们占据了视口的整个宽度。我知道如果不在自己的屏幕上查看，这有点难以看清，所以我强烈建议你自己尝试一下。

您不必将所有列都设置为 1fr。下面是一个例子，我将第一列和第三列设置为 10rem，而中间列设置为 1fr。您也可以将列设置为 2fr、3fr 等等，这样该列的项目将占用 2 倍、3 倍（等等）的空间。

调整单个网格项的大小

我们来讨论一下如何设置单个网格项的大小。您无法为单个网格项设置固定宽度，因为我们使用 明确设置了宽度。但是，如果您希望示例中的第五项具有多列的宽度，该怎么办？我们可以使用和 来grid-template-columns实现。grid-columnspan

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 10rem);
  grid-gap: 1rem;
}

.item5 {
  grid-column: span 2;
}

您将看到上面我们将第五个项目的 grid-column 设置为跨度为 2，这将允许第五个项目跨越两列的宽度。

但是如果你想让第五项跨越三列呢？就会发生这种情况。

由于第五个项目自然从第二列开始，我们没有足够的空间让它跨越我们设置的总宽度。所以它会向下移动到下一行。如果你想让一个项目跨越多行，你可以应用相同的grid-column概念grid-row。

有一个非常简单的解决方案，可以修复第五个项目向下移动一行后留下的空白。无论你是将项目设置为跨行还是跨列，都可以使用这个方案—— grid-auto-flow: dense。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 10rem);
  grid-gap: 1rem;
  grid-auto-flow: dense;
}

.item5 {
  grid-column: span 3;
}

在 CSS 网格中，网格会自动检查项目是否适合。正如我上面所说，如果某个项目不适合，它将换行到下一行。这Grid-auto-flow: dense会告诉网格用任何合适的项目填充这些空白处。在本例中，我添加了第七个网格项目，因此网格会自动将该项目和第六个项目移动到空白处。

CSS 网格布局总是会优先考虑需要放置在特定位置的项目——在本例中是第五个项目，因为它跨越了三列。然后，如果你已经grid-auto-flow: dense设置了，它会寻找其他项目来填充网格上的空白位置。

grid-auto-flow property在定义好项目后， 本身就决定了需要向哪个方向添加新的行或列。 行 是默认设置。除了使用 之外，我还没见过它有什么大用处grid-auto-flow: dense。

放置网格项目

在我们调整单个网格项大小的示例中，我们最初将第五个网格项设置为grid-column: span 2，这使得第五个网格项可以跨越两列。实际上，是和 的grid-column简写。 也同样如此。grid-column-startgrid-column-endgrid-row

所以，从技术上讲，我们将第五项设置为grid-column-start: span 2和grid-column-end: auto。本质上，我们告诉网格从第五项的自然位置开始，但尺寸是其两倍。

让我们再次处理项目五，我将使用 Firefox 的检查器工具来演示，以便您更轻松地查看项目五所在的轨道行。我还添加了几个网格项目。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 10rem);
  grid-gap: 1rem;
}

.item5 {
  grid-column-start: 1;
  grid-column-end: 3;
}

CSS Grid 会布局第五个项目之前的所有项目，然后停下来，查看第五个项目的起始和结束位置，并将其放置在我们指定的位置。简写为grid-column: 1 / 31 为起始值，3 为结束值。

您还可以指定单个网格项的跨度以及终止位置。grid-column在本例中，我使用了简写属性，因此我指定第五个网格项跨越两列，终止于第四条网格线。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 10rem);
  grid-gap: 1rem;
}

.item5 {
  grid-column: span 2 / 4;
}

如果您希望项目跨越整个网格宽度，但不知道网格的宽度，可以设置grid-column: 1 / -1。基本上，-1 值表示项目会一直移动到最后一个轨道。如果您对行执行此操作，您会注意到项目可能不会一直移动到网格的底部。它只会移动到显式行的底部，而不会移动到隐式行的底部。

资源

以下是我强烈推荐的一些资源，可帮助您深入了解 CSS Grid！

• Wes Bos 的 CSS 网格教程 ——完全免费，我就是在那里学习网格的。我喜欢他的教学风格！
• CSS Tricks 的 CSS Grid 完整指南 — 当您在 Grid 的某个方面遇到困难时，这里提供了一些很棒的备忘单。
• CSS 网格花园 ——一个有趣的练习 CSS 网格知识的方法。我建议在尝试之前先学习一下教程，因为有时会有点困惑。

感谢阅读我的 CSS 网格教程！记得关注我的Twitter ，我会发布很多关于科技的推文，说实话，还有很多关于狗狗的推文。