freeCodeCamp 课程源码解析用嵌套 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 响应式设计课程中「Create Grids within Grids在网格中创建网格」这一练习challenge为蓝本完整继承其种子代码、操作步骤与验证断言并结合同一课程块block中的前置练习与课程结构文件讲清 CSS Grid 嵌套布局的工作原理把任意网格项grid item再声明为 grid 容器即可得到层级化、可独立控制子项排布的多层网格。读完后你将掌握嵌套网格的触发条件只作用于直接子元素、display: grid与grid-template-columns的配合用法以及如何用fr、auto等网格单位混合定义列宽。核心概念嵌套网格只影响直接子元素freeCodeCamp 课程中该练习的原始描述见 Create Grids within Grids点出了嵌套网格的本质Turning an element into a grid only affects the behavior of its direct descendants. So by turning a direct descendant into a grid, you have a grid within a grid.把任一元素设为网格容器后CSS Grid 的排版规则只会作用于它的直接子元素更深层的后代不受影响。反之当你把网格容器的某个直接子元素grid item也设置display: grid时该元素就成了一个独立的内层网格容器它与自己的子元素构成一套完整的新网格——这就是「网格中的网格」。这一特性对应到页面结构上非常直观外层.container负责页面骨架广告栏、页头、内容区、页脚而内容区.item3内部的段落排版由它自己的网格规则决定两层布局互不干扰、各自独立调整。课程定位css-grid 块中的最后一道练习从课程结构文件 css-grid.json 可以看到css-grid块按challengeOrder顺序编排了 22 个练习从Create Your First CSS Grid开始依次覆盖列、行、间隙、对齐、grid-template-areas区域模板、repeat/minmax/auto-fill等函数最终落在本练习「Create Grids within Grids」id:5a94fe8569fb03452672e464。该块隶属于 responsive-web-design.json 超级块即 freeCodeCamp 响应式设计认证课程的一部分。理解这一编排有助于把握本练习为何是整块的收尾前面各练习的知识点网格单位、区域模板、grid-area定位在这里全部汇聚用于构建一个真实感更强的多列页面骨架。完整种子代码一个带区域模板的外层网格练习的种子代码seed定义了一个 3 行 2 列的页面骨架网格。完整代码如下其中.item3内部预留了注释标记的改动区域style .container { font-size: 1.5em; min-height: 300px; width: 100%; background: LightGray; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; grid-gap: 10px; grid-template-areas: advert header advert content advert footer; } .item1 { background: LightSkyBlue; grid-area: header; } .item2 { background: LightSalmon; grid-area: advert; } .item3 { background: PaleTurquoise; grid-area: content; /* Only change code below this line */ /* Only change code above this line */ } .item4 { background: lightpink; grid-area: footer; } .itemOne { background: PaleGreen; } .itemTwo { background: BlanchedAlmond; } /style div classcontainer div classitem1header/div div classitem2advert/div div classitem3 div classitemOneparagraph1/div div classitemTwoparagraph2/div /div div classitem4footer/div /div这段种子代码中蕴含了三个前置练习的知识点建议对照原文件阅读区域模板grid-template-areas字符串模板advert header / advert content / advert footer把网格划成header、advert、content、footer四个命名区域其中advert跨三行竖贯左侧。每个单词代表一个单元格每对引号代表一行——这与前置练习 Divide the Grid Into an Area Template 的讲解一致。grid-area定位网格项.item1到.item4各自通过grid-area: header等声明进入对应命名区域见前置练习 Place Items in Grid Areas Using the grid-area Property。网格单位fr与autogrid-template-columns: auto 1fr表示第一列宽随内容自适应auto剩余空间全部分给第二列1frgrid-template-rows: auto 1fr auto同理定义了三行。这些单位的语义fr为可用空间的一份、auto由内容撑开、%相对容器在 Use CSS Grid units to Change the Size of Columns and Rows 中有完整说明。值得注意的是.itemOne和.itemTwo两个子元素目前只有背景色没有任何网格规则——它们是内层网格的「占位项」等待.item3成为网格容器后才被排版。任务把item3变成auto 1fr的两列网格课程给出的原始指令是Turn the element with theitem3class into a grid with two columns with a width ofautoand1frusingdisplayandgrid-template-columns.即使用display和grid-template-columns两个属性把.item3变成一个两列网格第一列宽auto随子项内容宽度第二列宽1fr占满内容区剩余空间。标准答案只需在.item3的改动区域内补充两行声明.item3 { grid-template-columns: auto 1fr; display: grid; }两行声明的分工可以拆开看display: grid是触发嵌套的关键。没有这一行.item3只是外层网格的一个普通项内部的.itemOne、.itemTwo会以普通的块级流纵向堆叠。grid-template-columns: auto 1fr定义内层网格的列模板让两个段落子项各占一列第一列被paragraph1的文字宽度撑开第二列吃掉剩余宽度。由于声明只写在.item3上外层.container的三行两列布局完全不受影响——这正是「网格只作用于直接子元素」这一规则的实际体现。验证方式正则断言检查声明是否写入正确的选择器该练习属于challengeType: 0自由代码编辑型的练习类型freeCodeCamp 的课程数据格式用一组正则断言来验证学员代码是否满足要求。本练习的两条断言引自原文档--hints--部分分别检查assert.match( code, /.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi );assert.match(code, /.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi);从正则结构可以看出课程对答案的判定标准两条声明必须出现在.item3选择器块内部正则从.item3 {开始在其闭花括号范围内匹配且grid-template-columns的值严格为auto 1fr、display的值严格为grid。这种「选择器 块内声明」的匹配方式也间接提醒了嵌套网格的常见错误把display: grid误写到外层.container或子项.itemOne上是通不过验证的因为网格声明必须落在作为嵌套起点的那个直接子元素上。延伸从嵌套网格到响应式布局嵌套网格解决的是「局部排版自治」问题而 freeCodeCamp 的 css-grid 块中另一个练习 Use Media Queries to Create Responsive Layouts 则处理容器尺寸变化时的整体重排。二者结合正是本练习骨架的典型应用场景外层auto 1fr让广告栏窄、内容区宽内层auto 1fr让段落自适应文字当视口变窄时可以通过媒体查询改写内层的grid-template-columns例如改成单列1fr而不必触碰外层骨架。这种「每层网格各自定义列模板、各自响应断点」的分层思路是 CSS Grid 构建复杂页面如课程中出现的杂志版式、报纸版式布局练习见 css-grid 超级块结构 中的workshop-magazine与lab-newspaper-layout的基础模式。小结嵌套条件元素成为网格容器后布局规则仅作用于其直接子元素把某个 grid item 再声明为display: grid即得到网格中网格。本题解法在.item3中加display: grid;与grid-template-columns: auto 1fr;使其内部paragraph1、paragraph2两子项形成两列内层网格。单位语义auto由内容决定宽度1fr占满剩余可用空间两者混合使用是「固定语义列 弹性内容列」的常见搭配。验证机制课程用正则断言确认两条声明写在.item3选择器块内体现了声明作用域对嵌套网格正确性的关键性。完整原始题目、种子代码与参考答案见 curriculum/challenges/english/blocks/css-grid/5a94fe8569fb03452672e464.md练习顺序见 curriculum/structure/blocks/css-grid.json。【免费下载链接】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 构建「网格中网格」布局【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇以 freeCodeCamp 响应式设计课程中「Create Grids within Grids在网格中创建网格」这一练习challenge为蓝本完整继承其种子代码、操作步骤与验证断言并结合同一课程块block中的前置练习与课程结构文件讲清 CSS Grid 嵌套布局的工作原理把任意网格项grid item再声明为 grid 容器即可得到层级化、可独立控制子项排布的多层网格。读完后你将掌握嵌套网格的触发条件只作用于直接子元素、display: grid与grid-template-columns的配合用法以及如何用fr、auto等网格单位混合定义列宽。核心概念嵌套网格只影响直接子元素freeCodeCamp 课程中该练习的原始描述见 Create Grids within Grids点出了嵌套网格的本质Turning an element into a grid only affects the behavior of its direct descendants. So by turning a direct descendant into a grid, you have a grid within a grid.把任一元素设为网格容器后CSS Grid 的排版规则只会作用于它的直接子元素更深层的后代不受影响。反之当你把网格容器的某个直接子元素grid item也设置display: grid时该元素就成了一个独立的内层网格容器它与自己的子元素构成一套完整的新网格——这就是「网格中的网格」。这一特性对应到页面结构上非常直观外层.container负责页面骨架广告栏、页头、内容区、页脚而内容区.item3内部的段落排版由它自己的网格规则决定两层布局互不干扰、各自独立调整。课程定位css-grid 块中的最后一道练习从课程结构文件 css-grid.json 可以看到css-grid块按challengeOrder顺序编排了 22 个练习从Create Your First CSS Grid开始依次覆盖列、行、间隙、对齐、grid-template-areas区域模板、repeat/minmax/auto-fill等函数最终落在本练习「Create Grids within Grids」id:5a94fe8569fb03452672e464。该块隶属于 responsive-web-design.json 超级块即 freeCodeCamp 响应式设计认证课程的一部分。理解这一编排有助于把握本练习为何是整块的收尾前面各练习的知识点网格单位、区域模板、grid-area定位在这里全部汇聚用于构建一个真实感更强的多列页面骨架。完整种子代码一个带区域模板的外层网格练习的种子代码seed定义了一个 3 行 2 列的页面骨架网格。完整代码如下其中.item3内部预留了注释标记的改动区域style .container { font-size: 1.5em; min-height: 300px; width: 100%; background: LightGray; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; grid-gap: 10px; grid-template-areas: advert header advert content advert footer; } .item1 { background: LightSkyBlue; grid-area: header; } .item2 { background: LightSalmon; grid-area: advert; } .item3 { background: PaleTurquoise; grid-area: content; /* Only change code below this line */ /* Only change code above this line */ } .item4 { background: lightpink; grid-area: footer; } .itemOne { background: PaleGreen; } .itemTwo { background: BlanchedAlmond; } /style div classcontainer div classitem1header/div div classitem2advert/div div classitem3 div classitemOneparagraph1/div div classitemTwoparagraph2/div /div div classitem4footer/div /div这段种子代码中蕴含了三个前置练习的知识点建议对照原文件阅读区域模板grid-template-areas字符串模板advert header / advert content / advert footer把网格划成header、advert、content、footer四个命名区域其中advert跨三行竖贯左侧。每个单词代表一个单元格每对引号代表一行——这与前置练习 Divide the Grid Into an Area Template 的讲解一致。grid-area定位网格项.item1到.item4各自通过grid-area: header等声明进入对应命名区域见前置练习 Place Items in Grid Areas Using the grid-area Property。网格单位fr与autogrid-template-columns: auto 1fr表示第一列宽随内容自适应auto剩余空间全部分给第二列1frgrid-template-rows: auto 1fr auto同理定义了三行。这些单位的语义fr为可用空间的一份、auto由内容撑开、%相对容器在 Use CSS Grid units to Change the Size of Columns and Rows 中有完整说明。值得注意的是.itemOne和.itemTwo两个子元素目前只有背景色没有任何网格规则——它们是内层网格的「占位项」等待.item3成为网格容器后才被排版。任务把item3变成auto 1fr的两列网格课程给出的原始指令是Turn the element with theitem3class into a grid with two columns with a width ofautoand1frusingdisplayandgrid-template-columns.即使用display和grid-template-columns两个属性把.item3变成一个两列网格第一列宽auto随子项内容宽度第二列宽1fr占满内容区剩余空间。标准答案只需在.item3的改动区域内补充两行声明.item3 { grid-template-columns: auto 1fr; display: grid; }两行声明的分工可以拆开看display: grid是触发嵌套的关键。没有这一行.item3只是外层网格的一个普通项内部的.itemOne、.itemTwo会以普通的块级流纵向堆叠。grid-template-columns: auto 1fr定义内层网格的列模板让两个段落子项各占一列第一列被paragraph1的文字宽度撑开第二列吃掉剩余宽度。由于声明只写在.item3上外层.container的三行两列布局完全不受影响——这正是「网格只作用于直接子元素」这一规则的实际体现。验证方式正则断言检查声明是否写入正确的选择器该练习属于challengeType: 0自由代码编辑型的练习类型freeCodeCamp 的课程数据格式用一组正则断言来验证学员代码是否满足要求。本练习的两条断言引自原文档--hints--部分分别检查assert.match( code, /.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi );assert.match(code, /.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi);从正则结构可以看出课程对答案的判定标准两条声明必须出现在.item3选择器块内部正则从.item3 {开始在其闭花括号范围内匹配且grid-template-columns的值严格为auto 1fr、display的值严格为grid。这种「选择器 块内声明」的匹配方式也间接提醒了嵌套网格的常见错误把display: grid误写到外层.container或子项.itemOne上是通不过验证的因为网格声明必须落在作为嵌套起点的那个直接子元素上。延伸从嵌套网格到响应式布局嵌套网格解决的是「局部排版自治」问题而 freeCodeCamp 的 css-grid 块中另一个练习 Use Media Queries to Create Responsive Layouts 则处理容器尺寸变化时的整体重排。二者结合正是本练习骨架的典型应用场景外层auto 1fr让广告栏窄、内容区宽内层auto 1fr让段落自适应文字当视口变窄时可以通过媒体查询改写内层的grid-template-columns例如改成单列1fr而不必触碰外层骨架。这种「每层网格各自定义列模板、各自响应断点」的分层思路是 CSS Grid 构建复杂页面如课程中出现的杂志版式、报纸版式布局练习见 css-grid 超级块结构 中的workshop-magazine与lab-newspaper-layout的基础模式。小结嵌套条件元素成为网格容器后布局规则仅作用于其直接子元素把某个 grid item 再声明为display: grid即得到网格中网格。本题解法在.item3中加display: grid;与grid-template-columns: auto 1fr;使其内部paragraph1、paragraph2两子项形成两列内层网格。单位语义auto由内容决定宽度1fr占满剩余可用空间两者混合使用是「固定语义列 弹性内容列」的常见搭配。验证机制课程用正则断言确认两条声明写在.item3选择器块内体现了声明作用域对嵌套网格正确性的关键性。完整原始题目、种子代码与参考答案见 curriculum/challenges/english/blocks/css-grid/5a94fe8569fb03452672e464.md练习顺序见 curriculum/structure/blocks/css-grid.json。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
