freeCodeCamp CSS Grid 课程用 CSS Grid 单位fr、auto、%、px控制列与行尺寸【免费下载链接】freeCodeCampfreeCodeCamp.orgs 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 位前序挑战依次是Create Your First CSS Grid —— 通过display: grid创建第一个网格容器Add Columns withgrid-template-columns—— 用固定像素定义列Add Rows withgrid-template-rows—— 用固定像素定义行见 该挑战文档Use CSS Grid Units to Change the Size of Columns and Rows本挑战——引入弹性单位。从结构文件看前三个挑战都只用px这类固定单位本挑战正是从固定尺寸迈向弹性尺寸的转折点后续挑战会在此单位体系之上继续叠加repeat、minmax、auto-fill/auto-fit、媒体查询等能力。可用作轨道尺寸的五类单位挑战文档给出的核心知识点是在 CSS Grid 中定义行、列大小时除了绝对和相对单位如px、em还可以使用以下单位——单位含义适用场景fr将轨道设为可用空间的份额fraction希望剩余空间按比例分配时auto轨道宽度/高度随其内容自动撑开轨道宽度应由内容决定时%轨道宽度/高度为其容器的百分比需要与容器保持固定比例时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-rowschallengeType为 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 classcontainer div classd11/div div classd22/div div classd33/div div classd44/div div classd55/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.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 课程：用 CSS Grid 单位（fr、auto、%、px）控制列与行尺寸
freeCodeCamp CSS Grid 课程用 CSS Grid 单位fr、auto、%、px控制列与行尺寸【免费下载链接】freeCodeCampfreeCodeCamp.orgs 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 位前序挑战依次是Create Your First CSS Grid —— 通过display: grid创建第一个网格容器Add Columns withgrid-template-columns—— 用固定像素定义列Add Rows withgrid-template-rows—— 用固定像素定义行见 该挑战文档Use CSS Grid Units to Change the Size of Columns and Rows本挑战——引入弹性单位。从结构文件看前三个挑战都只用px这类固定单位本挑战正是从固定尺寸迈向弹性尺寸的转折点后续挑战会在此单位体系之上继续叠加repeat、minmax、auto-fill/auto-fit、媒体查询等能力。可用作轨道尺寸的五类单位挑战文档给出的核心知识点是在 CSS Grid 中定义行、列大小时除了绝对和相对单位如px、em还可以使用以下单位——单位含义适用场景fr将轨道设为可用空间的份额fraction希望剩余空间按比例分配时auto轨道宽度/高度随其内容自动撑开轨道宽度应由内容决定时%轨道宽度/高度为其容器的百分比需要与容器保持固定比例时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-rowschallengeType为 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 classcontainer div classd11/div div classd22/div div classd33/div div classd44/div div classd55/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.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考