freeCodeCamp CSS Grid 实战用 grid-template-rows 手动定义网格行高【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp这篇指南以 freeCodeCamp 开源课程中的交互式挑战 Add Rows with grid-template-rows课程文件curriculum/challenges/english/blocks/css-grid/5a9036e138fddaf9a66b5d33.md为主线讲解 CSS Grid 中显式定义行轨道row track的核心属性grid-template-rows。你将弄懂网格默认自动分行与手动声明行高的区别掌握属性语法、常用取值单位并透过 freeCodeCamp 自带的种子代码seed与测试断言hints学会验证解答从而在自己的布局中随心控制行高。挑战在课程中的定位在 freeCodeCamp 的 CSS Grid 知识块block中css-grid块共包含 22 道渐进式挑战。根据 curriculum/structure/blocks/css-grid.json 中的challengeOrder本节是第 3 道处于如下学习链路中Create Your First CSS Grid—— 通过display: grid把任意元素变成网格容器文件5a858944d96184f06fd60d61.mdAdd Columns with grid-template-columns—— 用grid-template-columns: 50px 50px之类声明列的数量与宽度文件5a9036d038fddaf9a66b5d32.mdAdd Rows with grid-template-rows本文主角—— 用同样的思路声明行其后还有网格单位fr、auto、%、行列间距、网格区域、repeat/minmax/auto-fill、媒体查询等进阶内容。也就是说学完本挑战你已经能把几行几列、每行每列多大完全掌握在自己手里这是构建一切网格布局的第一块基石。为什么需要手动声明行网格默认自动分行挑战描述点明了一个重要背景The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use thegrid-template-rowsproperty in the same way you usedgrid-template-columnsin the previous challenge.上一关创建的网格会自动设置行数。要手动调整行就像上一关使用grid-template-columns那样使用grid-template-rows。理解这句话需要先分清 CSS Grid 的两种轨道显式轨道explicit tracks由grid-template-columns/grid-template-rows明确声明的行与列。隐式轨道implicit tracks当网格项目放不下时网格自动补充出来的额外行或列。隐式行默认由grid-auto-rows控制其初始值为auto即行高跟随内容的实际高度自动伸缩。以上一关的种子代码为例容器被声明为 3 列grid-template-columns: 100px 100px 100px放入 5 个格子后网格会自动补出第 2 行来容纳第 4、5 个格子——但你没有为这行设置任何高度于是这些自动生成的行只会长到内容那么高视觉上高矮取决于内容。这正是本挑战要解决的问题通过grid-template-rows把行轨道从隐式、内容自适应变成显式、精确可控。语法一条属性声明整个行轨道列表grid-template-rows的书写方式与grid-template-columns完全对称。回顾上一关给出的范例.container { display: grid; grid-template-columns: 50px 50px; }上面两条语句会生成一个两列、每列宽 50px的网格。参数的数量决定列数每个参数的值决定对应列的宽度。同理.container { grid-template-rows: 50px 50px; }参数数量2 个即显式定义的行数每个参数值即对应行的高度第 1 行 50px、第 2 行 50px。这就是本挑战要求提交的核心答案。本关任务为网格添加两行 50px 高的行挑战指令非常简短Add two rows to the grid that are50pxtall each.即给网格添加两行、每行高50px。表面上是添加本质是把这两条轨道声明为显式轨道。种子代码逐段拆解HTML 部分由 5 个不同颜色的格子组成它们是网格项目itemsstyle .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; grid-template-columns: 100px 100px 100px; /* 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这份种子代码揭示了 CSS Grid 的两大角色网格容器container.container设了display: grid是承载布局的父元素。.container内的font-size: 40px、width: 100%、灰色背景只是视觉装饰真正参与网格布局的是display: grid与轨道声明网格项目itemsd1d5五个div是容器的直接子元素会自动依序放入网格单元。你可以数一下几何关系3 列 × 内容自动撑高的行会先把d1、d2、d3排满第 1 行d4、d5落到自动生成的第 2 行第 2 行右侧留下一个空格。此时第 2 行的高度完全由内容决定这就是接下来要改造的地方。标记注释的含义种子代码中的两行注释是 freeCodeCamp 交互式题目的一种约定/* Only change code below this line */ /* Only change code above this line */它划定了答题区你应当只在这两行注释之间补充声明从而让校验器能精确聚焦于你的改动也方便你对照参考解答。多数挑战对容器内其他已有声明如grid-template-columns不做改动要求。参考答案官方--solutions--给出的解答只有一行.container { grid-template-rows: 50px 50px; }把这行插入/* Only change code below this line */与/* Only change code above this line */之间即可。完整的可运行 HTML 如下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; grid-template-columns: 100px 100px 100px; /* Only change code below this line */ grid-template-rows: 50px 50px; /* 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渲染后你会得到一个 3 列 × 2 行的网格每行严格 50px 高d1、d2、d3在上行d4、d5在下行左侧下行右侧留空五个大号数字块整齐地铺在灰色画布上。若省略这行声明下行会退化回内容自适应高度——这就是显式行与自动行的视觉差异。校验原理hints 断言是怎么判断你写对了freeCodeCamp 的每条挑战都会在--hints--段附带一到多条断言。本关的断言是一段 JavaScript 正则assert.match( code, /.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi );拆解这段正则可以看出它的检查策略.container\s*?{—— 定位.container选择器及其规则块[\s\S]*—— 允许.container规则块内出现任意字符含换行即属性顺序、注释与空白都不影响结果grid-template-rows\s*?:\s*?50px\s*?50px\s*?;—— 核心条件grid-template-rows的值为恰好两个50px以空格分隔并以分号结尾结尾[\s\S]*}配合gi标志——大小写不敏感地匹配到整个规则块结束。可见该断言作用于源码文本层而非运行时计算样式。对比来看同一知识块的上一关 Add Columns with grid-template-columns 使用的却是__helpers.CSSHelp(document).getStyle(.container)?.gridTemplateColumns这类基于浏览器 DOM 的计算样式断言。两种风格并存说明freeCodeCamp 的测试既有查源码字符串的轻量校验也有查渲染结果的等价校验且会为每一关选择最合适的验证方式。在 freeCodeCamp 客户端中CSSHelp这类解析能力由挑战执行框架注入 iframe相关工具位于 client/src/templates/Challenges/utils/frame.ts。因此本关解答必须满足正则的字面约束——写成grid-template-rows: 50px 50px;两个值之间至少一个空格结尾有分号。即便你写成两行 50px 一行其他高度也过不了只有两个 50px 的正则检查。支持哪些取值从像素到弹性单位grid-template-rows的每个值都决定一条行轨道的高度可用单位与grid-template-columns一致。CSS Grid 知识块紧随其后的挑战 Use CSS Grid units to Change the Size of Columns and Rows文件5a9036ee38fddaf9a66b5d34.md对单位做了系统归纳取值含义典型场景px/em绝对或相对长度固定高度的行如工具条、卡片的固定行auto行高自动适配内容文字长短不一的内容行%相对容器尺寸的百分比按容器比例切分行高fr剩余可用空间的比例分配弹性布局如内容区占 2 份、页脚占 1 份例如该关展示的范例grid-template-columns: auto 50px 10% 2fr 1fr生成 5 列第 1 列贴内容宽度、第 2 列固定 50px、第 3 列占容器 10%余下空间被三等分其中 2 份给第 4 列、1 份给第 5 列。把这套单位迁移到grid-template-rows即可实现如头部 60px 主体1fr 底部2fr的经典三行布局。使用%、fr时行高会随容器变化此时通常配合容器的最小高度如后续 gap 挑战种子里的min-height: 300px才能看到明显效果。与后续挑战的衔接控制行相关性的三种手段掌握了grid-template-rows后你会陆续遇到与行直接相关的三道挑战提前了解能帮你把知识串成体系行间距Create a Row Gap using grid-row-gap文件5a9036ee38fddaf9a66b5d36.md声明了行轨道后用grid-row-gap: 5px在行之间留缝其种子代码把容器升级为grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;可见显式行列是间距布局的前提合并跨行CSS Grid 知识块的 Use grid-row to Control Spacing文件5a90373638fddaf9a66b5d39.md教你在网格项目上用grid-row跨越多个行轨道先想清楚行从哪到哪才能写出正确的跨行区间更智能的轨道定义知识块后半段的 Reduce Repetition Using the repeat Functionrepeat(2, 50px)等价于50px 50px与 Limit Item Size Using the minmax Functionminmax()让轨道在上下界间弹性伸缩会进一步简化grid-template-rows的书写。小结本挑战浓缩的三条要点默认行为只声明列、不声明行时行由网格自动生成并随内容伸缩隐式轨道、auto行高手动控制在网格容器上写grid-template-rows: 50px 50px;参数个数 显式行数参数值 各行之高与grid-template-columns完全同构验证方式本关 hints 用正则检查.container内是否出现grid-template-rows: 50px 50px;作答时把声明插在Only change code注释之间即可一次通过。至此你已经同时掌握列与行的显式轨道声明——一个网格的骨架由你说了算。下一步不妨动手验证把两个50px换成1fr 1fr或repeat(2, minmax(50px, auto))观察行高如何随容器变化这正是后续挑战将要深入的能力。【免费下载链接】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 CSS Grid 实战：用 grid-template-rows 手动定义网格行高
freeCodeCamp CSS Grid 实战用 grid-template-rows 手动定义网格行高【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp这篇指南以 freeCodeCamp 开源课程中的交互式挑战 Add Rows with grid-template-rows课程文件curriculum/challenges/english/blocks/css-grid/5a9036e138fddaf9a66b5d33.md为主线讲解 CSS Grid 中显式定义行轨道row track的核心属性grid-template-rows。你将弄懂网格默认自动分行与手动声明行高的区别掌握属性语法、常用取值单位并透过 freeCodeCamp 自带的种子代码seed与测试断言hints学会验证解答从而在自己的布局中随心控制行高。挑战在课程中的定位在 freeCodeCamp 的 CSS Grid 知识块block中css-grid块共包含 22 道渐进式挑战。根据 curriculum/structure/blocks/css-grid.json 中的challengeOrder本节是第 3 道处于如下学习链路中Create Your First CSS Grid—— 通过display: grid把任意元素变成网格容器文件5a858944d96184f06fd60d61.mdAdd Columns with grid-template-columns—— 用grid-template-columns: 50px 50px之类声明列的数量与宽度文件5a9036d038fddaf9a66b5d32.mdAdd Rows with grid-template-rows本文主角—— 用同样的思路声明行其后还有网格单位fr、auto、%、行列间距、网格区域、repeat/minmax/auto-fill、媒体查询等进阶内容。也就是说学完本挑战你已经能把几行几列、每行每列多大完全掌握在自己手里这是构建一切网格布局的第一块基石。为什么需要手动声明行网格默认自动分行挑战描述点明了一个重要背景The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use thegrid-template-rowsproperty in the same way you usedgrid-template-columnsin the previous challenge.上一关创建的网格会自动设置行数。要手动调整行就像上一关使用grid-template-columns那样使用grid-template-rows。理解这句话需要先分清 CSS Grid 的两种轨道显式轨道explicit tracks由grid-template-columns/grid-template-rows明确声明的行与列。隐式轨道implicit tracks当网格项目放不下时网格自动补充出来的额外行或列。隐式行默认由grid-auto-rows控制其初始值为auto即行高跟随内容的实际高度自动伸缩。以上一关的种子代码为例容器被声明为 3 列grid-template-columns: 100px 100px 100px放入 5 个格子后网格会自动补出第 2 行来容纳第 4、5 个格子——但你没有为这行设置任何高度于是这些自动生成的行只会长到内容那么高视觉上高矮取决于内容。这正是本挑战要解决的问题通过grid-template-rows把行轨道从隐式、内容自适应变成显式、精确可控。语法一条属性声明整个行轨道列表grid-template-rows的书写方式与grid-template-columns完全对称。回顾上一关给出的范例.container { display: grid; grid-template-columns: 50px 50px; }上面两条语句会生成一个两列、每列宽 50px的网格。参数的数量决定列数每个参数的值决定对应列的宽度。同理.container { grid-template-rows: 50px 50px; }参数数量2 个即显式定义的行数每个参数值即对应行的高度第 1 行 50px、第 2 行 50px。这就是本挑战要求提交的核心答案。本关任务为网格添加两行 50px 高的行挑战指令非常简短Add two rows to the grid that are50pxtall each.即给网格添加两行、每行高50px。表面上是添加本质是把这两条轨道声明为显式轨道。种子代码逐段拆解HTML 部分由 5 个不同颜色的格子组成它们是网格项目itemsstyle .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; grid-template-columns: 100px 100px 100px; /* 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这份种子代码揭示了 CSS Grid 的两大角色网格容器container.container设了display: grid是承载布局的父元素。.container内的font-size: 40px、width: 100%、灰色背景只是视觉装饰真正参与网格布局的是display: grid与轨道声明网格项目itemsd1d5五个div是容器的直接子元素会自动依序放入网格单元。你可以数一下几何关系3 列 × 内容自动撑高的行会先把d1、d2、d3排满第 1 行d4、d5落到自动生成的第 2 行第 2 行右侧留下一个空格。此时第 2 行的高度完全由内容决定这就是接下来要改造的地方。标记注释的含义种子代码中的两行注释是 freeCodeCamp 交互式题目的一种约定/* Only change code below this line */ /* Only change code above this line */它划定了答题区你应当只在这两行注释之间补充声明从而让校验器能精确聚焦于你的改动也方便你对照参考解答。多数挑战对容器内其他已有声明如grid-template-columns不做改动要求。参考答案官方--solutions--给出的解答只有一行.container { grid-template-rows: 50px 50px; }把这行插入/* Only change code below this line */与/* Only change code above this line */之间即可。完整的可运行 HTML 如下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; grid-template-columns: 100px 100px 100px; /* Only change code below this line */ grid-template-rows: 50px 50px; /* 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渲染后你会得到一个 3 列 × 2 行的网格每行严格 50px 高d1、d2、d3在上行d4、d5在下行左侧下行右侧留空五个大号数字块整齐地铺在灰色画布上。若省略这行声明下行会退化回内容自适应高度——这就是显式行与自动行的视觉差异。校验原理hints 断言是怎么判断你写对了freeCodeCamp 的每条挑战都会在--hints--段附带一到多条断言。本关的断言是一段 JavaScript 正则assert.match( code, /.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi );拆解这段正则可以看出它的检查策略.container\s*?{—— 定位.container选择器及其规则块[\s\S]*—— 允许.container规则块内出现任意字符含换行即属性顺序、注释与空白都不影响结果grid-template-rows\s*?:\s*?50px\s*?50px\s*?;—— 核心条件grid-template-rows的值为恰好两个50px以空格分隔并以分号结尾结尾[\s\S]*}配合gi标志——大小写不敏感地匹配到整个规则块结束。可见该断言作用于源码文本层而非运行时计算样式。对比来看同一知识块的上一关 Add Columns with grid-template-columns 使用的却是__helpers.CSSHelp(document).getStyle(.container)?.gridTemplateColumns这类基于浏览器 DOM 的计算样式断言。两种风格并存说明freeCodeCamp 的测试既有查源码字符串的轻量校验也有查渲染结果的等价校验且会为每一关选择最合适的验证方式。在 freeCodeCamp 客户端中CSSHelp这类解析能力由挑战执行框架注入 iframe相关工具位于 client/src/templates/Challenges/utils/frame.ts。因此本关解答必须满足正则的字面约束——写成grid-template-rows: 50px 50px;两个值之间至少一个空格结尾有分号。即便你写成两行 50px 一行其他高度也过不了只有两个 50px 的正则检查。支持哪些取值从像素到弹性单位grid-template-rows的每个值都决定一条行轨道的高度可用单位与grid-template-columns一致。CSS Grid 知识块紧随其后的挑战 Use CSS Grid units to Change the Size of Columns and Rows文件5a9036ee38fddaf9a66b5d34.md对单位做了系统归纳取值含义典型场景px/em绝对或相对长度固定高度的行如工具条、卡片的固定行auto行高自动适配内容文字长短不一的内容行%相对容器尺寸的百分比按容器比例切分行高fr剩余可用空间的比例分配弹性布局如内容区占 2 份、页脚占 1 份例如该关展示的范例grid-template-columns: auto 50px 10% 2fr 1fr生成 5 列第 1 列贴内容宽度、第 2 列固定 50px、第 3 列占容器 10%余下空间被三等分其中 2 份给第 4 列、1 份给第 5 列。把这套单位迁移到grid-template-rows即可实现如头部 60px 主体1fr 底部2fr的经典三行布局。使用%、fr时行高会随容器变化此时通常配合容器的最小高度如后续 gap 挑战种子里的min-height: 300px才能看到明显效果。与后续挑战的衔接控制行相关性的三种手段掌握了grid-template-rows后你会陆续遇到与行直接相关的三道挑战提前了解能帮你把知识串成体系行间距Create a Row Gap using grid-row-gap文件5a9036ee38fddaf9a66b5d36.md声明了行轨道后用grid-row-gap: 5px在行之间留缝其种子代码把容器升级为grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;可见显式行列是间距布局的前提合并跨行CSS Grid 知识块的 Use grid-row to Control Spacing文件5a90373638fddaf9a66b5d39.md教你在网格项目上用grid-row跨越多个行轨道先想清楚行从哪到哪才能写出正确的跨行区间更智能的轨道定义知识块后半段的 Reduce Repetition Using the repeat Functionrepeat(2, 50px)等价于50px 50px与 Limit Item Size Using the minmax Functionminmax()让轨道在上下界间弹性伸缩会进一步简化grid-template-rows的书写。小结本挑战浓缩的三条要点默认行为只声明列、不声明行时行由网格自动生成并随内容伸缩隐式轨道、auto行高手动控制在网格容器上写grid-template-rows: 50px 50px;参数个数 显式行数参数值 各行之高与grid-template-columns完全同构验证方式本关 hints 用正则检查.container内是否出现grid-template-rows: 50px 50px;作答时把声明插在Only change code注释之间即可一次通过。至此你已经同时掌握列与行的显式轨道声明——一个网格的骨架由你说了算。下一步不妨动手验证把两个50px换成1fr 1fr或repeat(2, minmax(50px, auto))观察行高如何随容器变化这正是后续挑战将要深入的能力。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考