企业官网建设流程全解析

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

【免费下载链接】freeCodeCampfreeCodeCamp.org's 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.

翻译成中文要点：

1. 作用对象是网格容器，而不是单个网格项——写.container { justify-items: ...; }一处，即可影响容器内所有网格项；
2. 只控制水平方向（inline 方向）的对齐，垂直方向交给align-items；
3. 取值与justify-self完全相同，区别仅在于作用范围。

在justify-self练习中已经介绍过水平对齐的取值，justify-items可以接受同一组值：

这里的关键理解是 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 class="container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</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 的对齐属性可以整理成一张速查表：

四者的取值一致（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.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp