网格区域和占据它们的元素不一定大小相同。

这是一个关于 CSS 网格的不错的知识点。

我相信对你们中的许多人来说这是显而易见的，但我写这篇博文是因为我自己对它花了很长时间才明白。

让我们仔细看看。

这里有两个需要你记住的东西

网格区域，由父元素使用 display: grid; 创建。
元素本身，比如一个 <div>，它进入这个网格区域。

例如，假设我们设置了一个像这样非常简单的网格

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

如果我们在里面放置四个网格项目，在 Firefox DevTools 中检查时它看起来像这样

现在让我们定位其中一个网格项目并赋予它一个 background-color

网格区域和元素大小相同！

不过，这是有充分理由的。因为 justify-items 和 align-items 的默认值为 stretch。stretch 的值实际上是将项目拉伸以填充网格区域。

但是有几个原因会导致元素可能不会填充网格区域

在网格父元素上，justify-items 或 align-items 是某个非 stretch 值。
在网格元素上，align-self 或 justify-self 是某个非 stretch 值。
在网格元素上，如果高度或宽度受到限制。

检查一下

谁在乎呢？

我不知道，只是感觉知道这一点很有用：将元素放置在网格区域中时，这只是布局的起点。它默认情况下会填充该区域，但它并不一定非要这样做。它可以更小或更大。它可以对齐到任何角落或居中。

也许最有趣的限制是你不能直接定位网格区域本身。例如，如果你想利用对齐方式，你就放弃了填充整个网格区域的承诺。因此，你不能再应用背景并知道它会覆盖整个网格区域。如果你需要利用对齐方式并应用覆盖背景，你需要将其留给 stretch，将新元素也设为 display: grid;，并使用它进行对齐。

Jymbob

# 2017 年 11 月 11 日

有一件事我还没有弄清楚如何在网格中实现，而在 flexbox 中可以实现，就是让最后一个项目填充一行中剩余的空间。如果我的顶行可以有 2 或 3 个项目，我该如何确保它始终是全宽？
我的 3×3 网格中有 7 到 9 个项目怎么办？

flexbox 中的 flex-wrap 和 align-items 的组合可以解决这个问题

Marosh

评论永久链接# 2017 年 11 月 12 日

这就是你将网格和 flexbox 结合使用的原因。在你知道项目确切位置时使用网格。在你有动态内容（例如产品列表）时使用 flexbox。
GridFlex

评论永久链接# 2017 年 11 月 13 日

你始终可以在网格中使用 flexbox。
basher

评论永久链接# 2017 年 11 月 13 日

问题是……网格是否是最适合包含多行包裹项目的“行”的布局机制？

网格最适合二维布局，而 flexbox 最适合一维布局。

所以我认为 flexbox 更适合你的例子，因为在你的例子中很容易填满整行。
Jymbob

评论永久链接# 2017 年 11 月 15 日

好的。但是对于我的响应式网站，我将重新排列这些网格区域，所以如果我只是在网格中插入一个 flex，我将不得不花很多时间才能重新排序它们。

我想我只是惊讶于 grid-column-start 和 grid-column-end 上没有最小/最大选项。这感觉像是倒退。
Jymbob

评论永久链接# 2017 年 11 月 15 日
注意：该网站设计相当标准
```
| header |
----------
|  main  |
| content|
----------
| footer |
```
除了每个部分中的项目数量可能会有所不同，具体取决于未知的配置。虽然这最初听起来像是使用 flex 的完美地方，但它的本质是 a) 某些元素始终位于特定位置，并且 b) 在较小的设备上，顺序可能完全不同。

因此，本质上我想要做的是指定一个带有 max-columns 的元素以及一个 grid-column-start 或 grid-column-end——我可能最终会花很多时间来解决这些问题，以便它能够正常工作

Mark

# 2017 年 11 月 15 日

Jymbob，你可以在网格中做到这一点。

// when there is a single element in the last row, make it 100% wide
ul li:nth-child(3n+1):nth-last-child(4) {
  + li + li +li {
    width:100%;
  }
}

// when there are two items in the last row, make them 50% wide
ul li:nth-child(3n+2):nth-last-child(4) {
  + li + li,
  + li + li ~ li {
    width: 50%;
  }
}

Šime Vidas

# 2017 年 11 月 11 日

还需要提一下网格区域是如何与网格单元格相关的：一个网格区域可以包含一个或多个网格单元格。因此，如果你将一个项目放置在一个网格单元格中，则网格区域就是该网格单元格，如果你让该项目跨越多个网格单元格，则网格区域代表所有这些单元格（包括单元格之间的任何网格间距）的组合空间。

顺便说一下，如果你只需要向非 stretch 项目占据的单个网格区域添加背景，可以使用网格容器的其中一个伪元素，并将其放置在同一个网格区域中

Chris Coyier

评论永久链接# 2017 年 11 月 12 日

可以使用网格容器的其中一个伪元素，并将其放置在同一个网格区域中

很聪明！

我想这与本文本身一样有趣

你可以在同一个网格区域中放置多个元素（即使它们的对齐方式不同）。

此评论线程已关闭。如果您有重要信息要分享，请联系我们。