尧图网站建设 
freeCodeCamp 课程实战用 grid-row-gap 为 CSS Grid 创建行间隙【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文以 freeCodeCamp 开源课程仓库中的 CSS Grid 挑战「Create a Row Gap using grid-row-gap」为主体完整解析如何用grid-row-gap属性为网格的行之间添加 5px 间隙并结合课程结构文件、挑战 Schema 与相邻挑战源码说明该挑战在学习路径中的位置、自动化测试的验证方式以及grid-row-gap与grid-column-gap、grid-gap之间的演进关系。读完后你可以独立复现该练习、理解其判题逻辑并掌握 CSS Grid 间距体系的核心用法。挑战在 CSS Grid 学习路径中的位置该挑战文件位于 curriculum/challenges/english/blocks/css-grid/5a9036ee38fddaf9a66b5d36.md元数据frontmatter中的关键字段如下字段值含义id5a9036ee38fddaf9a66b5d36挑战唯一标识ObjectIdtitleCreate a Row Gap using grid-row-gap挑战标题challengeType0挑战类型0表示 HTML/经典类型挑战forumTopicId301125对应的社区论坛主题 IDdashedNamecreate-a-row-gap-using-grid-row-gapURL 友好的短横线命名从 curriculum/structure/blocks/css-grid.json 的challengeOrder数组看该挑战是 css-grid 模块的第 6 个排在学习路径的「建网格 → 定义行列 → 控制大小 → 加间隙」这一节奏的关键节点上Create Your First CSS GridAdd Columns with grid-template-columnsAdd Rows with grid-template-rowsUse CSS Grid units to Change the Size of Columns and RowsCreate a Column Gap Using grid-column-gap上一关先学列间隙Create a Row Gap using grid-row-gap本挑战Add Gaps Faster with grid-gap下一关学习简写也就是说课程刻意先用grid-column-gap见 上一关挑战文件建立了「给列之间加间隙」的心智模型本挑战再把同样的思路迁移到行方向最后用 下一关挑战文件 中的grid-gap简写把两个长写属性合并。这种「先分后合」的编排正是该模块教学设计的主线。核心概念grid-row-gap 为行之间创建间隙挑战原文的讲解--description--说明你可以使用grid-row-gap在网格的行之间添加间隙方法与此前在列之间添加间隙的方式完全相同。grid-row-gap是 CSS Grid 的长写属性longhand只作用于行方向——它定义相邻行轨道grid row tracks之间的空隙取值可以是px、%、em、rem等长度单位。它写在网格容器即display: grid的元素上而不是写在网格项上浏览器会把间隙从可用空间中扣除各行的实际高度相应变小间隙本身显示容器背景色。本挑战的任务指令--instructions--非常直接为行创建一个5px高的间隙。官方给出的标准答案--solutions--只有一行style .container { grid-row-gap: 5px; } /style完整动手复现从种子代码到标准答案下面完整继承挑战文件--seed-contents--中的种子代码。这是一个 3 列 × 3 行的网格grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr包含 5 个彩色网格项style .d1 { background: LightSkyBlue; } .d2 { background: LightSalmon; } .d3 { background: PaleTurquoise; } .d4 { background: LightPink; } .d5 { background: PaleGreen; } .container { font-size: 40px; min-height: 300px; width: 100%; background: LightGray; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; /* Only change code below this line */ /* Only change code above this line */ } /style div classcontainer div classd11/div div classd22/div div classd33/div div classd44/div div classd55/div /div种子代码中两处Only change code注释标定了答题者的可编辑区域。完成练习只需要在.container声明块内补上一行.container { /* ...原有属性保持不变... */ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-row-gap: 5px; }应用后的视觉效果3 行轨道之间出现 2 条 5px 的浅灰LightGray水平缝隙5 个彩色方块在垂直方向上被明显分隔行高由 300px 的容器高度扣除两条 5px 间隙后再按1fr均分。这正是grid-template-rows: 1fr 1fr 1fr与grid-row-gap联动的典型结果——fr 单位先预留出间隙空间再分配剩余高度。从 CSS 规范演进角度看grid-row-gap属于 Grid Level 1 引入的早期命名现代规范推荐使用row-gap或gap的第一个值作为等价写法grid-row-gap目前仍被主流浏览器作为遗留别名支持。课程选择先讲grid-row-gap是因为它与grid-column-gap、grid-gap同属该模块的知识闭环后两关会继续讲这也是历史资料中大量旧代码使用该写法的缘故。判题机制hint 中的正则如何验证你的答案挑战文件--hints--部分内嵌了判题断言这揭示了 freeCodeCamp 对challengeType: 0HTML挑战的自动化校验方式assert.match( code, /.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi );逐段解读这个正则.container\s*?{匹配.container选择器及其起始大括号\s*?允许选择器与括号之间存在任意空白非贪婪[\s\S]*grid-row-gap声明块内部可包含任意内容但必须出现grid-row-gap\s*?:\s*?5px\s*?;冒号与5px之间、5px与分号之间都允许任意空白因此grid-row-gap:5px;、grid-row-gap : 5px ;等写法都能通过[\s\S]*}属性之后允许还有其他声明最后匹配闭合大括号。末尾的gi标志表示忽略大小写且全局匹配所以GRID-ROW-GAP: 5PX;也能通过。这套断言只约束「.container类中存在取值为5px的grid-row-gap声明」并不限制你写属性的位置或顺序——这与种子代码中保留完整容器属性的要求是一致的。结合课程工程看这道题的元数据约定本挑战的 frontmatter 字段并非随意书写它们受课程 Schema 校验。在 curriculum/schema/challenge-schema.js 中可以看到关键约束id: Joi.objectId().required()——挑战 ID 必须是 ObjectId 格式这解释了文件名5a9036ee38fddaf9a66b5d36.md的命名来源challengeType: Joi.number().min(0).max(33).required()——类型值必须在 0–33 之间本挑战取值0tests、title、helpCategory等字段均为必填项保证每道挑战的数据结构一致。而challengeType: 0的具体含义定义在 packages/shared/src/config/challenge-types.ts 中const html 0; // ... export const viewTypes { [html]: classic, // ... }; export const submitTypes { [html]: tests, // ... };从源码结构看类型0html使用classic视图渲染即经典的「代码区 运行预览 测试结果」界面提交后走tests流程——也就是执行像上文--hints--中那样的assert断言。这说明本挑战的判分完全依赖对用户代码的正则匹配而非像素级比对渲染结果。与相邻挑战的衔接从 grid-column-gap 到 grid-gap本挑战并非孤立知识点它承上启下承上——Create a Column Gap Using grid-column-gap上一关的讲解指出「你建的网格中列一直紧挨着。想在列之间留空隙就使用grid-column-gap」其指令是给列加20px间隙标准答案为.container { grid-column-gap: 20px; }。两个属性作用方向互补一个管行缝隙一个管列缝隙且都作用于容器。启下——Add Gaps Faster with grid-gap下一关把本挑战的grid-row-gap与上一关的grid-column-gap合并为简写。其讲解明确grid-gap只有一个值时行与列使用同一间隙两个值时第一个值设为行间隙第二个值设为列间隙。该关指令「行间隙 10px、列间隙 20px」对应的标准答案是.container { grid-gap: 10px 20px; }对照三关的判题正则可以发现一个统一的课程质量模式每个断言都以.container\s*?{开头锁定选择器中间用[\s\S]*容忍声明块内其他内容再用宽松空白匹配锁定「属性名 精确数值」从而保证答题者写法的灵活性空白、顺序、大小写与知识点的确定性属性名与数值兼得。小结本挑战的核心技能点只有一行在display: grid的容器上写grid-row-gap: 5px;即可在 3 行网格中制造 2 条 5px 行间隙练习的种子代码3×3 等分网格 5 个彩色项目完整保留自 挑战文件 的--seed-contents--段可直接复制到本地 HTML 文件中运行判题依赖宽松正则以assert.match校验用户代码挑战元数据id、challengeType受 challenge-schema.js 约束类型0的视图与提交流程由 challenge-types.ts 统一决定想继续深入建议按 css-grid.json 的challengeOrder顺序接着完成grid-gap简写、grid-column/grid-row定位控制与justify-self对齐等后续挑战。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 freeCodeCamp 课程实战：用 grid-row-gap 为 CSS Grid 创建行间隙
freeCodeCamp 课程实战用 grid-row-gap 为 CSS Grid 创建行间隙【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文以 freeCodeCamp 开源课程仓库中的 CSS Grid 挑战「Create a Row Gap using grid-row-gap」为主体完整解析如何用grid-row-gap属性为网格的行之间添加 5px 间隙并结合课程结构文件、挑战 Schema 与相邻挑战源码说明该挑战在学习路径中的位置、自动化测试的验证方式以及grid-row-gap与grid-column-gap、grid-gap之间的演进关系。读完后你可以独立复现该练习、理解其判题逻辑并掌握 CSS Grid 间距体系的核心用法。挑战在 CSS Grid 学习路径中的位置该挑战文件位于 curriculum/challenges/english/blocks/css-grid/5a9036ee38fddaf9a66b5d36.md元数据frontmatter中的关键字段如下字段值含义id5a9036ee38fddaf9a66b5d36挑战唯一标识ObjectIdtitleCreate a Row Gap using grid-row-gap挑战标题challengeType0挑战类型0表示 HTML/经典类型挑战forumTopicId301125对应的社区论坛主题 IDdashedNamecreate-a-row-gap-using-grid-row-gapURL 友好的短横线命名从 curriculum/structure/blocks/css-grid.json 的challengeOrder数组看该挑战是 css-grid 模块的第 6 个排在学习路径的「建网格 → 定义行列 → 控制大小 → 加间隙」这一节奏的关键节点上Create Your First CSS GridAdd Columns with grid-template-columnsAdd Rows with grid-template-rowsUse CSS Grid units to Change the Size of Columns and RowsCreate a Column Gap Using grid-column-gap上一关先学列间隙Create a Row Gap using grid-row-gap本挑战Add Gaps Faster with grid-gap下一关学习简写也就是说课程刻意先用grid-column-gap见 上一关挑战文件建立了「给列之间加间隙」的心智模型本挑战再把同样的思路迁移到行方向最后用 下一关挑战文件 中的grid-gap简写把两个长写属性合并。这种「先分后合」的编排正是该模块教学设计的主线。核心概念grid-row-gap 为行之间创建间隙挑战原文的讲解--description--说明你可以使用grid-row-gap在网格的行之间添加间隙方法与此前在列之间添加间隙的方式完全相同。grid-row-gap是 CSS Grid 的长写属性longhand只作用于行方向——它定义相邻行轨道grid row tracks之间的空隙取值可以是px、%、em、rem等长度单位。它写在网格容器即display: grid的元素上而不是写在网格项上浏览器会把间隙从可用空间中扣除各行的实际高度相应变小间隙本身显示容器背景色。本挑战的任务指令--instructions--非常直接为行创建一个5px高的间隙。官方给出的标准答案--solutions--只有一行style .container { grid-row-gap: 5px; } /style完整动手复现从种子代码到标准答案下面完整继承挑战文件--seed-contents--中的种子代码。这是一个 3 列 × 3 行的网格grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr包含 5 个彩色网格项style .d1 { background: LightSkyBlue; } .d2 { background: LightSalmon; } .d3 { background: PaleTurquoise; } .d4 { background: LightPink; } .d5 { background: PaleGreen; } .container { font-size: 40px; min-height: 300px; width: 100%; background: LightGray; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; /* Only change code below this line */ /* Only change code above this line */ } /style div classcontainer div classd11/div div classd22/div div classd33/div div classd44/div div classd55/div /div种子代码中两处Only change code注释标定了答题者的可编辑区域。完成练习只需要在.container声明块内补上一行.container { /* ...原有属性保持不变... */ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-row-gap: 5px; }应用后的视觉效果3 行轨道之间出现 2 条 5px 的浅灰LightGray水平缝隙5 个彩色方块在垂直方向上被明显分隔行高由 300px 的容器高度扣除两条 5px 间隙后再按1fr均分。这正是grid-template-rows: 1fr 1fr 1fr与grid-row-gap联动的典型结果——fr 单位先预留出间隙空间再分配剩余高度。从 CSS 规范演进角度看grid-row-gap属于 Grid Level 1 引入的早期命名现代规范推荐使用row-gap或gap的第一个值作为等价写法grid-row-gap目前仍被主流浏览器作为遗留别名支持。课程选择先讲grid-row-gap是因为它与grid-column-gap、grid-gap同属该模块的知识闭环后两关会继续讲这也是历史资料中大量旧代码使用该写法的缘故。判题机制hint 中的正则如何验证你的答案挑战文件--hints--部分内嵌了判题断言这揭示了 freeCodeCamp 对challengeType: 0HTML挑战的自动化校验方式assert.match( code, /.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi );逐段解读这个正则.container\s*?{匹配.container选择器及其起始大括号\s*?允许选择器与括号之间存在任意空白非贪婪[\s\S]*grid-row-gap声明块内部可包含任意内容但必须出现grid-row-gap\s*?:\s*?5px\s*?;冒号与5px之间、5px与分号之间都允许任意空白因此grid-row-gap:5px;、grid-row-gap : 5px ;等写法都能通过[\s\S]*}属性之后允许还有其他声明最后匹配闭合大括号。末尾的gi标志表示忽略大小写且全局匹配所以GRID-ROW-GAP: 5PX;也能通过。这套断言只约束「.container类中存在取值为5px的grid-row-gap声明」并不限制你写属性的位置或顺序——这与种子代码中保留完整容器属性的要求是一致的。结合课程工程看这道题的元数据约定本挑战的 frontmatter 字段并非随意书写它们受课程 Schema 校验。在 curriculum/schema/challenge-schema.js 中可以看到关键约束id: Joi.objectId().required()——挑战 ID 必须是 ObjectId 格式这解释了文件名5a9036ee38fddaf9a66b5d36.md的命名来源challengeType: Joi.number().min(0).max(33).required()——类型值必须在 0–33 之间本挑战取值0tests、title、helpCategory等字段均为必填项保证每道挑战的数据结构一致。而challengeType: 0的具体含义定义在 packages/shared/src/config/challenge-types.ts 中const html 0; // ... export const viewTypes { [html]: classic, // ... }; export const submitTypes { [html]: tests, // ... };从源码结构看类型0html使用classic视图渲染即经典的「代码区 运行预览 测试结果」界面提交后走tests流程——也就是执行像上文--hints--中那样的assert断言。这说明本挑战的判分完全依赖对用户代码的正则匹配而非像素级比对渲染结果。与相邻挑战的衔接从 grid-column-gap 到 grid-gap本挑战并非孤立知识点它承上启下承上——Create a Column Gap Using grid-column-gap上一关的讲解指出「你建的网格中列一直紧挨着。想在列之间留空隙就使用grid-column-gap」其指令是给列加20px间隙标准答案为.container { grid-column-gap: 20px; }。两个属性作用方向互补一个管行缝隙一个管列缝隙且都作用于容器。启下——Add Gaps Faster with grid-gap下一关把本挑战的grid-row-gap与上一关的grid-column-gap合并为简写。其讲解明确grid-gap只有一个值时行与列使用同一间隙两个值时第一个值设为行间隙第二个值设为列间隙。该关指令「行间隙 10px、列间隙 20px」对应的标准答案是.container { grid-gap: 10px 20px; }对照三关的判题正则可以发现一个统一的课程质量模式每个断言都以.container\s*?{开头锁定选择器中间用[\s\S]*容忍声明块内其他内容再用宽松空白匹配锁定「属性名 精确数值」从而保证答题者写法的灵活性空白、顺序、大小写与知识点的确定性属性名与数值兼得。小结本挑战的核心技能点只有一行在display: grid的容器上写grid-row-gap: 5px;即可在 3 行网格中制造 2 条 5px 行间隙练习的种子代码3×3 等分网格 5 个彩色项目完整保留自 挑战文件 的--seed-contents--段可直接复制到本地 HTML 文件中运行判题依赖宽松正则以assert.match校验用户代码挑战元数据id、challengeType受 challenge-schema.js 约束类型0的视图与提交流程由 challenge-types.ts 统一决定想继续深入建议按 css-grid.json 的challengeOrder顺序接着完成grid-gap简写、grid-column/grid-row定位控制与justify-self对齐等后续挑战。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考