如何在 CSS 网格上使用隐式轨道大小

到目前为止，我们的 css 网格教程主要关注明确的值——我们明确定义的轨道大小。我们使用了 200px 高的行，或者可能是 1fr 宽的列，并且我们已经明确说明了我们想要多少。但是如果我们不知道（或不想承诺）我们想要多少轨道怎么办？这就是隐含价值发挥作用的地方——让我们来看看。

初学者网格

这是一个基本的网格，您可以按照它进行分叉。它为我们提供了一个网格容器，其中包含 9 个网格项。尚未定义列宽或数量，因此每个项目都填充了可用的最大宽度：

See the Pen  Understanding Implicit Sizing in CSS Grid: Base Grid by Envato Tuts+ (@tutsplus)  on CodePen.

只定义一列

假设我们想要左边一列，并且我们确切地知道我们想要它的宽度：300px。我们可以通过添加grid-template-columns: 300px;到我们的网格容器来定义它。但是除非我们明确定义它们，否则我们不会得到任何其他列：

See the Pen  Understanding Implicit Sizing in CSS Grid: Defined Column by Envato Tuts+ (@tutsplus)  on CodePen.

也就是说，除非我们说我们希望将其中一个网格项放入（例如）第 1 行的第 3 列：

.item-3 {

  grid-column: 3;

  grid-row: 1;

}

然后，这会在我们定义的网格之外为我们提供额外的列，因为 CSS Grid 将使用可用空间及其自动放置算法来确定其他所有内容的位置。

See the Pen  Understanding Implicit Sizing in CSS Grid: Auto Columns by Envato Tuts+ (@tutsplus)  on CodePen.

这很棒，即使我们想要更多列，Grid 也会做出假设，而不必定义每一列。但是，如果我们希望那些隐含的轨道，不管有多少，有一个特定的宽度呢？这就是 grid-auto-columns发挥作用的地方。

对 grid-auto-columns 说“你好”

如果我们希望除第一列之外的所有列都是 100px 宽，我们可以隐式声明：

grid-auto-columns: 100px;

结合我们明确的价值，我们可以两全其美。在这里，我们说我们希望第一列是1fr（它占用剩余空间的一小部分——auto在这里会产生相同的效果），并且之后的任何其他列都应该是100px：

grid-template-columns: 1fr;grid-auto-columns: 100px;

这给了我们以下信息：

See the Pen  Understanding Implicit Sizing in CSS Grid: grid-auto-columns by Envato Tuts+ (@tutsplus)  on CodePen.

如果我们声明第 3 项实际上应该放在第 1 行的第 5 列中，则 Grid 知道添加任何其他列的宽度，因为它是隐含的。

See the Pen  Understanding Implicit Sizing in CSS Grid: grid-auto-columns, more rows by Envato Tuts+ (@tutsplus)  on CodePen.

我们也不限于这里的像素值；我们可以使用分数单位、em 单位，甚至是我们在之前教程中讨论过minmax()的符号。

不要忘记网格自动行

几乎不用说， grid-auto-rows对行的 grid-auto-columns作用与对列的作用相同。这是一个示例，其中除前两行之外的所有行都固定在200px.

See the Pen  Understanding Implicit Sizing in CSS Grid: grid-auto-rows by Envato Tuts+ (@tutsplus)  on CodePen.

结论

Grid 的许多属性都有默认值，如果你没有定义任何不同的东西，它们会照顾你，但在某些情况下，我们至少需要暗示我们想要什么。通过隐式轨道大小，我们可以暗示任何额外的行或列应该是什么大小，如果需要的话。