freeCodeCamp CSS Grid 实战：用 minmax 函数限制网格项尺寸（Limit Item Size Using the minmax Function）

本文基于 freeCodeCamp 响应式设计课程中 CSS Grid 块的一道交互式挑战文档 5a94fe4469fb03452672e460.md 展开，讲解 CSS Grid 中 minmax() 内置函数的用法：如何用它为 grid-template-columns 和 grid-template-rows 定义的轨道（列/行）设定"最小值—最大值"区间，从而在网格容器尺寸变化时限制网格项的大小。读完本文，你将掌握 minmax() 的语法、它与 repeat() 的组合写法，并能独立完成该挑战给出的 repeat(3, minmax(90px, 1fr)) 练习。

课程背景：这道挑战在 CSS Grid 块中的位置

在 freeCodeCamp 的课程结构中，挑战文件按块（block）组织在 curriculum/challenges/english/blocks/<块名>/ 目录下。本文对应的 CSS Grid 块的挑战清单定义在 css-grid.json 中，本挑战的 id 为 5a94fe4469fb03452672e460，标题为 Limit Item Size Using the minmax Function。

从课程编排看，它处于一条清晰的学习链上：

1. 前一道挑战 Reduce Repetition Using the repeat Function（见 5a94fe3669fb03452672e45f.md）刚教会你用 repeat() 消除 grid-template-columns 的重复值；
2. 本挑战在此基础上引入 minmax()，把 repeat 中重复的值替换为一个带弹性区间的列宽；
3. 紧接着的 Create Flexible Layouts Using auto-fill（见 5a94fe5469fb03452672e461.md）则会把 minmax 与 auto-fill 组合，进入真正的自适应布局。

也就是说，minmax 是"固定列数"与"完全自动填充"之间的关键过渡工具。该块最终归属于响应式设计超级块，其结构见 responsive-web-design.json。

核心概念：minmax 为网格轨道设定尺寸区间

按挑战文档的描述，minmax 是与 grid-template-columns 和 grid-template-rows 配合使用的另一个内置函数。它的用途是：当网格容器尺寸发生变化时，限制网格项的大小。要做到这一点，需要为轨道指定一个可接受的大小范围。

文档给出的标准示例：

grid-template-columns: 100px minmax(50px, 200px);

这行代码创建了两列：

• 第一列固定为 100px 宽；
• 第二列的宽度被约束在 最小 50px、最大 200px 之间。

语法要点拆解：

要素	含义	示例中的取值
grid-template-columns:	声明网格的列模板（行则用 grid-template-rows:）	创建两列
100px	固定长度，轨道尺寸不再变化	第一列宽 100px
minmax(最小值, 最大值)	轨道宽度的弹性区间，容器伸缩时在该区间内分配空间	最小 50px、最大 200px

两个关键参数说明：

• 最小值（第一个参数）：容器缩小到极限时，轨道也不会小于该值。它防止网格项被"挤扁"到不可用。
• 最大值（第二个参数）：容器放大时，轨道最多占据的空间。最大值的单位可以是固定单位（如 200px），也可以是弹性单位（如本挑战答案中的 1fr），后者表示"在剩余空间里按需分配，但不低于最小值"。

挑战实操：把 1fr 替换为 minmax(90px, 1fr)

文档给出的练习指令是：使用 minmax 函数，把 repeat 函数中的 1fr 替换为最小宽度 90px、最大宽度 1fr 的列宽，然后调整预览面板大小观察效果。

初始种子代码（seed）

挑战的初始代码是一个 5 个网格项、3 列 3 行的网格。以下是完整的 seed 代码，其中 /* Only change code below this line */ 与 /* Only change code above this line */ 之间是需要修改的区域：

<style>
  .item1 {
    background: LightSkyBlue;
  }
  .item2 {
    background: LightSalmon;
  }
  .item3 {
    background: PaleTurquoise;
  }
  .item4 {
    background: LightPink;
  }
  .item5 {
    background: PaleGreen;
  }

  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* Only change code below this line */

    grid-template-columns: repeat(3, 1fr);

    /* Only change code above this line */
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

种子代码中各属性的作用：

• display: grid：把 .container 变成网格容器；
• width: 100% + min-height: 300px：让容器占满可用宽度并保证有足够高度，便于观察伸缩效果；
• grid-template-columns: repeat(3, 1fr)：三列，每列平分剩余空间——这正是本挑战要改造的起点；
• grid-template-rows: 1fr 1fr 1fr 与 grid-gap: 10px：三行等分行高、轨道间距 10px。

参考答案

只需把可修改区域内的列模板从 repeat(3, 1fr) 改为：

<style>
  .container {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
  }
</style>

即完整解法为 grid-template-columns: repeat(3, minmax(90px, 1fr));。其含义是：重复 3 次"最小 90px、最大 1fr"的列轨道。当预览面板被拉窄时，三列不会无限压缩，而是被 90px 的下限兜底；当面板被拉宽时，每列以 1fr 的方式共享剩余空间继续变宽。

验证逻辑：正则断言如何校验你的答案

挑战文档的提示区（# --hints--）内置了自动测试断言，它要求 container 类的 grid-template-columns 必须匹配"repeat 3 列、每列最小 90px 最大 1fr"的模式：

assert.match(
  code,
  /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
);

从正则结构可以看出校验的几个细节，这些也侧面印证了正确答案的写法要点：

• 正则容忍属性名、冒号、逗号两侧的任意空白（\s*?），因此缩进风格不影响判定；
• 它严格要求 repeat 的第一个参数是 3，第二个参数是 minmax(90px, 1fr) 的形式——参数顺序不能颠倒，minmax 的写法是"最小值在前、最大值在后"；
• 匹配范围锚定在 .container { ... } 选择器块内部，确保修改落在了正确的选择器上。

这套"挑战 markdown 内嵌断言 + seed 代码"的文件格式是整个 freeCodeCamp 课程的标准结构，字段定义可参考课程 schema challenge-schema.js，其中 challengeType: 0 表示通用代码挑战类型。

与 repeat 函数的关系：minmax 嵌套在 repeat 内部

本挑战之所以自然，是因为它建立在 repeat 函数之上。回顾前一挑战的结论：repeat(n, value) 会把 value 重复 n 次。而 minmax() 作为一个函数，正好可以充当 repeat 第二个参数的"值"。两者组合的完整语义是：

grid-template-columns: repeat(3, minmax(90px, 1fr));

等价于展开写法：

grid-template-columns: minmax(90px, 1fr) minmax(90px, 1fr) minmax(90px, 1fr);

这里有一个值得注意的边界情况：三列每列最小 90px，意味着容器总宽至少要能容纳 3 × 90px 加 2 个 10px 的 grid-gap（约 320px），否则网格项会被迫换行溢出。这正是文档要求你"resize the preview panel to see the effect"的原因——通过拖窄/拖宽预览面板，可以直接观察到下限被触发（列不再变窄）与上限被触发（列随剩余空间拉伸）两种状态。

延伸：从 minmax 走向 auto-fill 的弹性布局

文档没有止步于本挑战。紧邻的下一课 Create Flexible Layouts Using auto-fill 指出，repeat 函数带有一个 auto-fill 选项，允许浏览器按容器大小自动插入尽可能多的行列；而把 auto-fill 与 minmax 组合，就是响应式卡片布局的经典写法：

repeat(auto-fill, minmax(60px, 1fr));

按该课文档的说明：当容器尺寸变化时，这种设置会不断插入 60px 起的列并拉伸它们，直到能再放下新的一列为止；若一行放不下所有项，项会被移到新行。可以看出，minmax() 提供的"最小尺寸保底 + 弹性上限"机制，正是 auto-fill/auto-fit 自适应行为的基础组件——这也是课程把本挑战安排在 auto-fill 之前的原因。

要点小结

• minmax(min, max) 是与 grid-template-columns / grid-template-rows 配合使用的内置函数，用于在容器尺寸变化时限制网格轨道的大小；两个参数顺序固定为"最小值在前、最大值在后"。
• 文档示例 grid-template-columns: 100px minmax(50px, 200px) 表示：第一列固定 100px，第二列宽度约束在 50px–200px 之间。
• 本挑战的标准答案是 grid-template-columns: repeat(3, minmax(90px, 1fr));，即 3 列均享有 90px 的下限保护，并以 1fr 在剩余空间中弹性分配。
• 验证由文档内嵌的正则断言完成，要求修改位于 .container 选择器块内，且列模板必须精确匹配 repeat(3, minmax(90px, 1fr)) 的空白容忍模式。
• minmax 是理解下一课 repeat(auto-fill, minmax(...)) 弹性布局的前提，相关挑战文件位于 curriculum/challenges/english/blocks/css-grid/ 目录，块顺序定义见 curriculum/structure/blocks/css-grid.json。