企业官网建设流程全解析

freeCodeCamp 响应式 Web 设计课程：用 grid-area 属性将项目放入 CSS Grid 命名区域

【免费下载链接】freeCodeCampfreeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp

本文围绕 freeCodeCamp 课程中 “Place Items in Grid Areas Using the grid-area Property” 这一练习展开，讲解如何在定义好grid-template-areas区域模板后，通过子项上的grid-area属性按名称把元素放进指定区域。读完后你能掌握：命名区域（named area）的引用机制、grid-area单值简写与四值行线/列线简写的区别，并能完整复现课程中 header/advert/content/footer 的经典网格布局，理解其在 responsive-web-design 超级块 中的教学位置。

前置概念：先有区域模板，再谈放置

grid-area的第一种用法是引用容器上已声明的命名区域。区域模板由grid-template-areas定义，这一点在紧邻的上一关 Divide the Grid Into an Area Template 中已经学过分：

grid-template-areas: 'header header header' 'advert content content' 'footer footer footer';

规则是：每个单词代表一个单元格，每对引号代表一行；同一行中重复出现的名称表示该区域横跨这些单元格。上一关的练习目标正是把footer改成横跨整行底部，而本关的 seed 代码已经预设了这个最终模板。

需要注意：定义区域模板本身不会立刻产生视觉变化，必须让某个子项去“认领”这个区域，布局才会体现出来——这正是本关要完成的事情。

核心操作：grid-area 通过名称认领区域

官方文档给出的核心用法非常简洁，在子项上写：

.item1 { grid-area: header; }

这条声明告诉网格：.item1这个类所对应的元素要放进名为header的区域。由于本关模板中第一行三个单元格全部命名为header，该元素会自动占据整行顶部的宽度，而不需要手动指定列线或跨度。

本关任务与参考答案

课程指令是：将带item5类的元素放入footer区域。官方提示（hints）用正则断言验证答案：

assert.match( __helpers.removeCssComments(code), /.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi );

从这段断言可以看出两个实现细节：匹配前先通过removeCssComments剥离 CSS 注释，防止学员用注释掉代码的方式“绕过”检测；正则在大小写不敏感模式下允许任意空白。参考答案只有一行：

.item5 { grid-area: footer; }

完整可运行的练习代码

以下是本关的完整 seed 代码（源自 课程挑战文件），把grid-area: footer;填入/* Only change code below this line */区域即可通过：

<style> .item1 { background: LightSkyBlue; } .item2 { background: LightSalmon; } .item3 { background: PaleTurquoise; } .item4 { background: LightPink; } .item5 { background: PaleGreen; /* Only change code below this line */ grid-area: footer; /* Only change code above this line */ } .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; grid-template-areas: 'header header header' 'advert content content' 'footer footer footer'; } </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>

逐段说明容器配置：

• grid-template-columns: 1fr 1fr 1fr与grid-template-rows: 1fr 1fr 1fr：3 列 3 行，每行每列等分剩余空间，共 9 个单元格；
• grid-gap: 10px：行、列统一 10px 间距；
• grid-template-areas：三行模板把 9 个单元格归并为header（顶行整行）、advert（中左）、content（中右两格）、footer（底行整行）四个命名区域；
• 此时若不给item5设置grid-area，5 个元素会按文档顺序自动填充单元格；加上grid-area: footer后，元素 5 被“吸附”到底部整行，其余元素在剩余空间自动排布。

纵深理解：grid-area 的第二种写法

同一属性还有另一种常被混淆的用法——不依赖命名模板，直接写网格线号。在紧随其后的 Use grid-area Without Creating an Areas Template 中可以看到：

.item1 { grid-area: 1/1/2/4; }

四个数值按grid-area: 行起始线 / 列起始线 / 行结束线 / 列结束线;的顺序取值，表示该元素占据第 1 到第 2 条水平线之间、第 1 到第 4 条垂直线之间的区域。对比两种写法：

从源码结构看，freeCodeCamp 刻意把两种写法的练习排在相邻两关（见 css-grid 块的挑战顺序），正是为了让学习者区分“引用名称”和“引用线号”这两个重载形式，避免写成grid-area: 1/1 footer之类的混合错误。

在课程体系中的位置与延伸

本关在 css-grid 块 中排第 15 位，处于“对齐”系列练习（justify-self、align-self、justify-items、align-items）之后、“repeat/minmax/auto-fill/auto-fit”系列之前，属于区域（areas）主题三连的第二关。学完命名区域后，课程还会在 Create Grids within Grids 等后续练习中继续深化网格技巧。若希望系统巩固 CSS Grid 全部知识点，仓库中还有配套的 quiz-css-grid 测验 与 lecture-working-with-css-grid 讲义 可作延伸阅读。

要点回顾

1. grid-area: header;通过名称把子项放入容器grid-template-areas中定义的对应区域，元素自动占据该区域覆盖的全部单元格；
2. 区域模板只声明不放置时没有任何视觉效果，grid-area是让模板“生效”的关键一步；
3. 当值为数字四元组时，grid-area切换为线号模式（行起/列起/行止/列止），无需模板即可定位；
4. 本关标准答案：给.item5添加grid-area: footer;，让第 5 个元素占据底部整行。

【免费下载链接】freeCodeCampfreeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp