freeCodeCamp 课程实战：用 CSS Grid 的 justify-items 一次性对齐所有网格项

freeCodeCamp 课程实战用 CSS Grid 的 justify-items 一次性对齐所有网格项【免费下载链接】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 章节的一道核心练习题展开讲解justify-items这一网格容器级对齐属性它会作用在网格容器上让容器内所有网格项一次性获得统一的水平对齐方式。读完后你将理解justify-items与justify-self的“容器级 vs 单项级”差异、掌握其全部取值start/center/end/stretch并能独立完成课程中“把所有网格项水平居中”的实际编码任务。课程背景这道题在 CSS Grid 章节的位置该练习题位于课程仓库的 CSS Grid 模块文件为 css-grid 对齐练习。在 css-grid 区块结构文件 中可以看到完整的练习顺序{ dashedName: css-grid, helpCategory: HTML-CSS, challengeOrder: [ { id: 5a858944d96184f06fd60d61, title: Create Your First CSS Grid }, { id: 5a9036d038fddaf9a66b5d32, title: Add Columns with grid-template-columns }, { id: 5a9036e138fddaf9a66b5d33, title: Add Rows with grid-template-rows }, ... { id: 5a90374338fddaf9a66b5d3a, title: Align an Item Horizontally using justify-self }, { id: 5a90375238fddaf9a66b5d3b, title: Align an Item Vertically using align-self }, { id: 5a90376038fddaf9a66b5d3c, title: Align All Items Horizontally using justify-items }, { id: 5a94fdf869fb03452672e45b, title: Align All Items Vertically using align-items } ], blockLayout: legacy-challenge-list }也就是说justify-items这道题ID5a90376038fddaf9a66b5d3c紧接在两道“单项对齐”练习之后先学了用justify-self对齐单个网格项见 justify-self 练习再学用justify-items对齐全部网格项随后则是垂直方向的align-items见 align-items 练习。这种“先单项、后全局、再换方向”的编排正好覆盖了 CSS Grid 四套对齐属性justify-self/align-self作用于单项与justify-items/align-items作用于容器、影响所有项。从文件头的元数据也能确认它的类型challengeType: 0表示这是一道在编辑器中实时修改 HTML/CSS 代码的经典编码题类型定义见 challenge-schema.js 中的challengeType: Joi.number().min(0).max(33).required()。该 css-grid 区块同样属于 Responsive Web Design 认证出现在 responsive-web-design-v9.json 的区块列表中。核心概念justify-items 是“批量对齐”属性课程原文的说明--description--小节是Sometimes you want all the items in your CSS Grid to share the same alignment. You can use the previously learned properties and align them individually, or you can align them all at once horizontally by usingjustify-itemson your grid container. This property can accept all the same values you learned about in the previous two challenges, the difference being that it will moveallthe items in our grid to the desired alignment.翻译成中文要点作用对象是网格容器而不是单个网格项——写.container { justify-items: ...; }一处即可影响容器内所有网格项只控制水平方向inline 方向的对齐垂直方向交给align-items取值与justify-self完全相同区别仅在于作用范围。在justify-self练习中已经介绍过水平对齐的取值justify-items可以接受同一组值取值效果水平方向stretch默认值网格项内容拉伸填满整个单元格的宽度start内容对齐到单元格左侧LTR 布局下center内容在单元格中水平居中end内容对齐到单元格右侧LTR 布局下这里的关键理解是 CSS Grid 中“单元格cell”与“网格项item”的关系每个网格项都被放置在一个单元格中而justify-items决定的是网格项在其单元格内部的水平摆放位置。当取值不是stretch时网格项不再撑满单元格宽度而是收缩到内容宽度并移动到指定位置。练习起点完整的 Seed 代码课程给出的初始代码如下来自 原文档 的--seed-contents--小节任务要求是在.container中标注的“Only change code”区域内使用justify-items把所有网格项水平居中style .item1 { background: LightSkyBlue; } .item2 { background: LightSalmon; } .item3 { background: PaleTurquoise; } .item4 { background: LightPink; } .item5 { 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; grid-gap: 10px; /* Only change code below this line */ /* Only change code above this line */ } /style div classcontainer div classitem11/div div classitem22/div div classitem33/div div classitem44/div div classitem55/div /div对这段起点代码做一个参数级拆解display: grid将.container声明为网格容器这是使用一切 Grid 布局属性的前提grid-template-columns: 1fr 1fr 1fr与grid-template-rows: 1fr 1fr 1fr定义了 3 列 3 行、每行每列等宽等高的 9 单元格网格fr单位表示按比例分配剩余空间grid-gap: 10px是行列间距的简写属性现代 CSS 中通常写作gap: 10px让单元格之间留出 10px 间隙min-height: 300px保证容器有足够高度使得每行单元格明显高于内容高度——这正是对齐效果能被肉眼观察到的原因若单元格高度等于内容高度垂直对齐将毫无可见差异5 个网格项只写了font-size继承自容器的 40px和不同背景色没有任何尺寸约束。默认justify-items: stretch下它们会各自横向拉伸填满所在单元格的宽度。解题给容器加一行 justify-items课程给出的参考解答--solutions--小节极其简洁——只需在.container的“Only change code”区域内加一行.container { justify-items: center; }加上这一行后5 个网格项全部收缩到内容宽度一个数字字符的宽度并在各自单元格中水平居中。对比一下两种写法的差异单项对齐justify-self见 justify-self 练习需要为每个要移动的项单独声明例如.item2 { justify-self: center; }只能影响被声明的那一项批量对齐justify-items在容器上声明一次作用于容器内所有网格项正是本题“center all our items horizontally”要求的效果。从 CSS 规范层面看justify-self写在项上时会覆盖容器justify-items对它的继承影响因此两者可以配合使用先给容器一个全局对齐策略再对个别需要特殊摆放的项用justify-self单独调整。同理垂直方向也存在align-items容器级与align-self单项级的对应关系对应下一道练习 align-items该题要求align-items: end把全部项推到单元格底部。仓库如何验证这道题测试断言与正则练习题文件中的--hints--小节不仅给出了解题提示“.container类应该有一个值为center的justify-items属性”还直接包含了用于自动判分的断言代码assert.match( code, /.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi );这个正则值得逐段读.container\s*?{匹配.container选择器的规则块开头[\s\S]*允许任意字符含换行在规则块内穿行justify-items\s*?:\s*?center\s*?;是核心属性名与冒号、center与分号之间均容忍任意空白justify-items:center;、justify-items: center ;都能通过[\s\S]*}匹配到规则块结尾gi标志使匹配不区分大小写且可跨多行。这种“正则匹配源码”的判分方式是 freeCodeCamp 课程中challengeType: 0编码题的典型模式同一文件中align-items、justify-self等相邻练习使用完全同构的断言它验证的是关键 CSS 声明确实出现在正确选择器中而不是渲染结果的像素级比对。理解这一判分机制后就能明白为什么答案必须写在.container规则块内——若把justify-items写到某一项上虽可能在视觉效果上等价于“所有项各自动效”但断言要求它出现在.container块中。小结四属性对齐体系以这道justify-items练习为锚点CSS Grid 的对齐属性可以整理成一张速查表属性写在哪里影响范围控制方向justify-self网格项单个项水平align-self网格项单个项垂直justify-items网格容器所有项水平align-items网格容器所有项垂直四者的取值一致auto/start/end/center/stretch默认stretch。实际开发中的经验是先给容器设置justify-items/align-items作为全局对齐策略再对例外项用-self系列微调。这套内容在仓库中的完整上下文可以从 css-grid 区块结构 出发沿着challengeOrder逐题阅读 curriculum/challenges/english/blocks/css-grid/ 目录下的 21 个练习文件从“Create Your First CSS Grid”到“Create Grids within Grids”循序渐进地补全 CSS Grid 的列行定义、间距、轨道定位grid-column/grid-row/grid-area与响应式布局知识。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考