企业官网建设流程全解析

freeCodeCamp CSS Grid 课程：用 CSS Grid 单位（fr、auto、%、px）控制列与行尺寸

【免费下载链接】freeCodeCampfreeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp

本篇技术指南基于 freeCodeCamp 课程（curriculum）中 CSS Grid 模块的挑战 Use CSS Grid Units to Change the Size of Columns and Rows 展开，讲解如何用fr、auto、%以及绝对/相对单位在grid-template-columns与grid-template-rows中精确控制网格轨道尺寸。读完后你将能够自由组合多种单位设计响应式网格，并理解 freeCodeCamp 平台如何校验你的代码答案。

这个挑战在 CSS Grid 课程中的位置

在 css-grid block 结构文件 中，challengeOrder定义了 22 个挑战的教学顺序。本挑战（id 为5a9036ee38fddaf9a66b5d34）排在第 4 位，前序挑战依次是：

1. Create Your First CSS Grid —— 通过display: grid创建第一个网格容器；
2. Add Columns withgrid-template-columns—— 用固定像素定义列；
3. Add Rows withgrid-template-rows—— 用固定像素定义行（见 该挑战文档）；
4. Use CSS Grid Units to Change the Size of Columns and Rows（本挑战）——引入弹性单位。

从结构文件看，前三个挑战都只用px这类固定单位，本挑战正是从"固定尺寸"迈向"弹性尺寸"的转折点；后续挑战会在此单位体系之上继续叠加repeat、minmax、auto-fill/auto-fit、媒体查询等能力。

可用作轨道尺寸的五类单位

挑战文档给出的核心知识点是：在 CSS Grid 中定义行、列大小时，除了绝对和相对单位（如px、em），还可以使用以下单位——

这些单位可以直接写在grid-template-columns和grid-template-rows中，且允许在同一条声明里混用——这正是本挑战要练习的能力。

一个完整的五列混用示例

挑战文档给出了生成预览效果的代码：

grid-template-columns: auto 50px 10% 2fr 1fr;

这条声明会创建五列，逐列含义如下：

• 第 1 列：auto，宽度等于其内容的宽度；
• 第 2 列：50px，固定 50px；
• 第 3 列：10%，等于容器宽度的 10%；
• 第 4 列与第 5 列：2fr 1fr，把扣除前三列后剩余的可用空间划分为 3 等份，第 4 列占其中 2 份、第 5 列占 1 份。

这里体现了 CSS Grid 尺寸解析的关键顺序：浏览器先解析固定值（px）、容器百分比（%）和内容自适应值（auto），最后把剩下的自由空间按fr比例瓜分。所以2fr 1fr并非"容器的 2/3 和 1/3"，而是"剩余空间的 2/3 和 1/3"。

实战任务：编写三列网格

挑战的指令是：创建一个三列网格，三列宽度依次为1fr、100px、2fr。

挑战附带的完整 seed 代码如下（dashedName为use-css-grid-units-to-change-the-size-of-columns-and-rows，challengeType为 0，即编辑器型挑战）：

<style> .d1 { background: LightSkyBlue; } .d2 { background: LightSalmon; } .d3 { background: PaleTurquoise; } .d4 { background: LightPink; } .d5 { background: PaleGreen; } .container { font-size: 40px; width: 100%; background: LightGray; display: grid; /* Only change code below this line */ grid-template-columns: auto 50px 10% 2fr 1fr; /* Only change code above this line */ grid-template-rows: 50px 50px; } </style> <div class="container"> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> <div class="d5">5</div> </div>

注意 seed 中font-size: 40px的作用：五个子项里是1~5的数字，大字号让每列的内容宽度差异明显，便于观察auto列被内容撑开的效果；grid-template-rows: 50px 50px来自上一个挑战的成果，把网格固定为两行、每行 50px。

标准答案只需把注释区那一行替换为：

<style> .container { grid-template-columns: 1fr 100px 2fr; } </style>

即第 1 列占剩余空间的 1/3、第 2 列固定 100px、第 3 列占剩余空间的 2/3。

平台如何校验你的代码

本挑战--hints--部分内置了测试断言，它用正则表达式检查.container规则块内是否出现目标声明：

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

从这条断言可以读出几点平台校验逻辑：

• 要求声明位于.container { ... }规则块内，写在其他选择器里不算通过；
• 三个单位1fr、100px、2fr的顺序敏感，且中间可含任意空白（\s*?）；
• 正则带gi标志，匹配不区分大小写。

这也解释了为什么挑战要求"宽度依次为 1fr、100px、2fr"而不是"包含这三种单位"——顺序本身是教学点：固定轨道夹在两列弹性轨道之间时，列的左右位置由声明顺序决定。

单位体系的纵深：后续挑战如何在此基础上扩展

本挑战建立的单位基础，被同 block 的后续挑战直接复用，从 block 结构 可见完整脉络：

repeat：消除重复声明

Use repeat Function 挑战 在本挑战的单位之上引入repeat函数，例如把1fr 1fr 1fr简写为repeat(3, 1fr)，还支持多值重复：

grid-template-columns: repeat(2, 1fr 50px) 20px; /* 等价于 1fr 50px 1fr 50px 20px */

minmax：给 fr 加上边界

Limit Item Size Using the minmax Function 挑战 进一步演示用minmax()给弹性轨道限幅：repeat(3, minmax(90px, 1fr))让每列最小 90px、最大 1fr。可以看到fr既可作为minmax的上界，也能与像素下界组合，形成"小屏不塌、大屏自适应"的轨道。

其他常用轨道单位函数

同 block 中还有 Create Flexible Layouts Using auto-fill 与 auto-fit 挑战，它们与minmax组合可生成"自动换行"的卡片式网格；Use Media Queries to Create Responsive Layouts 挑战 则示范了在视口变化时切换不同的grid-template-columns声明。

小结

• CSS Grid 的轨道尺寸单位可混用：px/em等长度单位提供固定值，%相对容器，auto相对内容，fr相对剩余自由空间；
• fr的比例只作用于固定轨道扣除后的剩余空间，这是设计响应式布局时最容易误解的一点；
• 本挑战的完整 seed、答案与断言均位于 挑战文档，可直接在 freeCodeCamp 平台的编辑器型挑战环境中运行验证；
• 后续学习路径为repeat→minmax→auto-fill/auto-fit→ 媒体查询，完整顺序以 curriculum/structure/blocks/css-grid.json 中的challengeOrder为准。

【免费下载链接】freeCodeCampfreeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp