在“图解CSS：Grid布局” 系列 的第三部分 主要探讨了，在 grid-template-columns 和 grid-template-rows 中使用长度值来设置网格轨道尺寸大小。这里长度值指的是使用不同单位（比如，px，%，em，rem和vw等）值，并且花了较长的篇幅和大家探讨了 fr （弹性系数，又称<flex>系数）给网格轨道尺寸带来的变化以及 fr 在网格轨道中是怎么计算的。不过，在网格布局中，除了使用上一章节中用的带有不同单位的长度值之外，还可以使用一些关键词，比如接下来要介绍的 none 和 auto（我们熟悉的），min-content、max-content、fit-content 等关键词以及fit-content()函数。阅读完这篇文章之后，你就能了解这些关键词是如何帮助我们来设置网格轨道尺寸。感兴趣的同学请继续往下阅读。

none

关键词none 是 grid-template-columns 和 grid-template-rows 属性的默认值。如果这两个属性的值设置为 none 时，意味着 没有显式网格轨道。如果网格轨道中任何网格项目，仍然会得到隐式网格轨道。比如下面这个示例：

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: 1fr;
}

这个示例 grid-template-rows 属性显式设置了 none 值，创建隐式的行，但是由于网格容器中有四个网格项目，因此会有两个隐式的行。另外，使用grid-auto-rows 属性定义了隐式行大小（行高）。

none还起着另一个作用。如果你希望重置或覆盖之前定义的网格时，就可以使用该值。

注意，在没有显式网格的情况下，任何行（或列）都将隐式生成，它们的大小将由 grid-auto-rows 和 grid-auto-columns 属性决定。比如示例中的grid-auto-rows就设置了值为1fr。

auto

auto是自动的意思，指的是 网格项目内容的大小。将一列设置为auto时，意味着将其设置为其网格项目的宽度；将一行设置为auto时，意味着将其设置为其网格项目的高度。比如下面这个示例：

.container {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 5px;
}

上面示例，grid-template-columns设置的值为auto auto auto，表示三列网格轨道宽度都是auto，第一个网格项目和第三个网格项目的内容都是文本，只是内容长度不一样，第二个网格项目的内容是一张图片。此时，第一列和第三列的列宽是文本内容长度对应的宽度，第二列是图片宽度：

为了更好的向大家展示auto给网格轨道带来的变化，示例中的第一个网格项目设置了contenteditable="true"，你可以在直接在第一个网格项目中编辑文本内容。当你输入任意内容时，你会看到第一列网格轨道的大小也会随之发生变化，以匹配文本的宽度：

正如上面视频展示的效果所示，设置为auto的列，只有在有空间的情况下才会有完整的文本尺寸（所在行所有文本宽度总和）。否则，它将导致文本换行。

如果你阅读《CSS中 auto 值你知多少》一文的话，会发现：

关键词auto在整个CSS中可以有不同的含义（运用在不同的CSS属性中，代表的含义和所起的作用不同）。

例如，块级元素 width取值auto时，表示占用块元素所有可用的宽度，而在内联级元素中，它只占用内容所需的空间。这样一描述的话，你是不是已经感觉到了，在网格布局中，网格轨道取值为auto时，渲染的行为类似于行内元素，它将占用内容的空间。不过，在网格轨道中使用auto时，会有一个例外，如果网格轨道中有一个网格项目设置尺寸，那么这个尺寸将会直接影响到对应网格轨道尺寸。 比如，上面的示例，如果在第三个网格项目中显式设置width值：

.grid__item {
    width: 200px;
}

这个网格项目对应的网格列轨道尺寸也变了，变成了200px：

事实上，网格轨道取值为auto，还有很多细节，比如如何分配额外的空间，我们在这不做详细阐述，但可以仔细阅读后面有关于网格轨道尺寸算法相关的章节。

在实际使用的时候，如果你希望网格轨道大小与网格项目内容尺寸相匹配时，就可以使用auto值。而且auto特别适用于文本、图片、SVG和Canvas等元素。

min-content 和 max-content

在《图解CSS: 元素尺寸的设置》一章中，我们了解到：

在CSS中存在两种尺寸：内在尺寸（Intrinsic Size）和外在尺寸（Extrinsic Size）。

元素的width或height设置的固定属性值，就是指外在尺寸；而由元素包含的内容量决定的尺寸就是指内在尺寸。其中，CSS的min-content、max-content和fit-content都是内在尺寸的代表。同样地，在网格轨道尺寸设置中也可以使用这几个内在属性值。