注：我刚刚翻译了下面的文字并将其发布在这里。参考文献在本文末尾。

你好。今天我想谈谈一些特殊的 CSS 网格关键字，它们对于定义网格轨道的大小很有用。使用这些关键字的能力将使您能够精确确定所需的网格轨道尺寸。那么，我们走吧。

这篇文章是我介绍 CSS Grid 系列的一部分。如果您想查看我以前的帖子，可以在这里找到完整的目录。

介绍尺寸关键字

当谈到CSS网格时，只有三个关键字可以用来确定轨道的大小。这些关键字是 auto、min-content 和 max-content。所有这些都可以在 CSS 属性 grid-template-colums 和 grid-template-rows 中使用。

最小内容和最大内容

如果您想让网格轨道的大小取决于其内容，则必须使用两个关键字之一：min-content 或 max-content。 最小内容网格轨道将尝试保持最小大小而不溢出其内容。 最大内容网格轨道 但是，假定可扩展的可用空间是无限的，并假定内容的理想宽度。

让我向您展示一些示例，显示所提到的关键字之间的差异。请记住，每个图像包含两个容器：左侧带有 min-content 网格列 的容器，右侧带有 max-content 网格列 的容器。

正如您在此处看到的，最小内容列和最大内容列之间的大小没有差异。原因是图像有其“默认固定大小”，除非您明确告诉它更改，否则该图像不会更改。另一方面，文本的内容可以根据情况“压缩”其大小。这种压缩是使用文本换行（文本换行）来完成的，即单个单词不换行。知道了这一点，让我们用一些文本替换上面示例中的图像。

这次，列宽不同。列 min-content 强制其文本内容“换行”，而列 max-content 扩展得太多，以至于不需要文本换行。请注意，列 min-content 与最长单词的宽度相同，并且列 max-content 现在比容器本身更宽。

当一列包含多个内容类型时会发生什么？以下是包含图像和文本的列的示例。

在这两种情况下，最宽的元素决定列的大小。对于 min-content，该元素是图像或最长的单词。对于列 max-width，这是图像或整个文本。请注意两种内容类型如何在列中垂直分隔。我想在我以后的一篇文章中讨论这种行为。

关键字自动

关键字auto与我在前两篇文章中描述的单元fr有关。它同样确定网格轨道必须“填充”给定轴上的所有可用空间。

.container {
    /** ... **/
    grid-template-columns: auto auto;
}

但是，auto 关键字和 fr 单位之间有两个主要区别。首先，关键字 auto 不是一个单位，因此您不能像使用 fr 那样将其与数值（例如 2auto）一起使用。其次，当两者一起使用时，关键字 auto 总是会“输掉”单位 fr。请参阅下面的示例。

.container {
    /** ... **/
    grid-template-columns: auto 1fr;
}

您可以期望 auto 列在水平维度上“填充”与 fr 列等量的空间。然而，列 fr 的存在会导致该列自动“缩小”其大小以适应当前内容的大小。

请注意，对于文本内容，自动网格轨道的行为与最小内容/最大内容网格轨道不同。当 auto 与 fr 混合时，auto-track 永远不会强制文本内容“换行”，除非自动跟踪“填充”所有可用空间。

.container {
    /** ... **/
    width: 200px;
    grid-template-columns: auto 1fr;
}

感谢您阅读这篇短文。如果您想阅读更多这样的内容，请关注我的 dev.to 或 Twitter 帐户。另外，请随时给我任何反馈。我很想阅读您的评论。我们下一篇文章再见！

PS。如果您想支持我的工作，请给我一杯咖啡，我将不胜感激。谢谢。 ❤️

来源

文章作者：Mateusz Kirmuć.