CSS 网格：维度关键字

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

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

本文是我介绍 CSS 网格系列的一部分。如果你想查看我以前的帖子，在这里你可以找到完整的索引。

介绍尺寸关键字

当谈到 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 的存在会导致该列自动“缩小”其大小以适应当前内容的大小。

Observe que, no caso de text content, a auto grid track se comporta de forma diferente da min-content/max-content grid track. Quando auto é misturado com fr, a auto-track nunca força o text content a "wrap", a menos que a auto-track "fill" (preencha) todo o espaço disponível.

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

Obrigado por ler este pequeno artigo. Se quiser ler mais conteúdo como este, siga minha conta dev.to ou twitter. Além disso, sinta-se à vontade para me dar qualquer tipo de feedback. Eu adoraria ler seus comentários. Vejo você em breve no meu próximo artigo!

PS. Se quiser apoiar meu trabalho, ficarei grato por uma xícara de café. Obrigado. ❤️

Fonte

Artigo escrito por Mateusz Kirmuć.

以上是CSS 网格：维度关键字的详细内容。更多信息请关注PHP中文网其他相关文章！