前面花了两个章节（Grid布局 Part3 和 Part4）介绍了在grid-template-columns 和 grid-template-rows 中使用固定长度值，动态值和一些关键词来设置网格轨道的大小。除了这些之外，还可以使用一些函数，比如minmax(min, max)、repeat() 等来设置网格轨道大小。在这一章节点，主要围绕着在 grid-template-columns 和 grid-template-rows 属性中如何使用函数（minmax(min, max) 和 repeat()）设置网格轨道尺寸，感兴趣的话，请继续往下阅读。

minmax(min, max)

minmax(min, max) 是一个 CSS 函数，可以用在 grid-template-columns 和 grid-template-rows 属性上，用来设置网格轨道的尺寸。我们可以给 minmax() 函数传两个参数值，即 一个是 min 和 max 。每个参数都可以是 <length>（比如px）、<percentage>（比如%）、<flex>（比如fr）的一种，或者是max-content、min-content、auto等关键词。

CSS 规范对 minmax(min, max) 是这样定义的：

定义了一个大于或等于min和小于或等于max的尺寸范围。

简单地说，minmax(min, max)函数将返回一个 min ~ max 范围中的一个值。该函数返回的值可以作为grid-template-columns 或 grid-template-rows的值。我们来看一个简单地示例：

.container {
    grid-template-columns: minmax(100px, 200px) 1fr 1fr;
}

我们简单分析上面这个示例。示例中使用 grid-template-columns 创建了一个三列网格，其中：

• 第一列的列宽是 minmax(100px, 200px)。min 是 100px，max 是 200px
• 第二列和第三列的列宽都是 1fr。意味着，它们将占网格容器有用空间的1/2，即，容器宽度的 50%。

我们来考虑一下不同宽度的网格容器，可以拖动示例中的滑块来调整网格容器的宽度：

• 当网格容器宽度足够宽时，minmax(100px, 200px) 返回的值是 200px，即第一列的网格轨道宽度是 200px（max的值）
• 当网格容器宽度调到很小时（比如 200px），minmax(100px, 200px) 返回的值是 100px，即第一列的网格轨道宽度是 100px（min的值）
• 另外，minmax(100px, 200px) 还会返回一个 100px ~ 200px 之间的值，比如当容网格容器宽度是 290px时，minmax(100px, 200px) 返回的值就是 143px

在这个示例中，minmax(min, max) 函数中的 min 和 max 都是静态的长度值（<length>），并且只在一个网格轨道中使用 minmax(min, max)函数。其实，我们还可以使用 minmax(min, max) 在一个以上的网格轨道中使用。比如，我们把上面示例中的两个 1fr 都换成 minmax(100px, 200px)，当然你也可以换成任何你希望使用的值：

.container {
    grid-template-columns: minmax(100px, 200px) minmax(100px, 200px) minmax(100px, 200px)
}

这个示例，三列网格轨道宽度都会在 100px ~ 200px 之间变动，最大是200px，最小是100px：

除了静态值，minmax(min, max) 函数中的两个参数 min 和 max 还可接受一些动态值（需要计算的值），比如我们熟悉的%和fr。通过使用它们，我们可以定义既具响应式（Responsiv），又能根据网格容器可用空间改变网格轨道尺寸。比如下面这个示例：

.container {
    grid-template-columns: minmax(30%, 50%) 1fr 1fr;
}

这个示例定义的网格，其中第一列网格轨道的宽度在 30% ~ 50%之间，而第二列和第三列使用的是1fr，即网格容器可用空间宽度的1/2（即网格容器可用空间宽度的50%）。你可以尝试着拖动示例中的滑块，当网格容器宽度改变之后，第一列网格轨道大小也会随之改，在这个示例中，有可能小到0，这是因为网格容器宽度是相对于其父容器按百分比计算的：

你可能已经发现了，在minmax(min, max)函数两个参数都使用<percentage>的时候，会令我们感到困惑，我们来做一个假设：