命名网格线与命名网格区域
为网格线和网格区域命名，让网格布局定位更易读、更易维护。
命名网格线与命名网格区域 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
命名网格线
可以在 grid-template-columns 和 grid-template-rows 中使用方括号为网格线命名。与直接使用数字相比，命名网格线能让放置代码更易读。
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>使用命名网格线放置项目
请在 grid-column 和 grid-row 中使用命名网格线，以实现更易读的放置：
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>带有 -start 和 -end 的网格线名称
使用 grid-template-areas 定义命名区域时，CSS 会自动创建带有 -start 和 -end 后缀的命名网格线，供您引用。
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>重复的命名网格线
使用 repeat() 时，可以在重复的模式中包含名称。网格线会获得编号后缀，以避免歧义。
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>跨越命名网格线
请将命名网格线与 span 一起使用，以跨越指定数量的命名轨道：
<div class="grid">
<div class="header">Header spans 3</div>
<div>A</div><div>B</div><div>C</div>
</div>命名区域回顾
命名区域（通过 grid-template-areas 定义）是放置项目时最易读的方法：
<div class="page">
<header>Header</header>
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
<div class="footer">Footer</div>
</div>用于复杂布局的命名网格线
对于包含多个跨越元素的复杂编辑布局，命名网格线尤其有用：
<div class="magazine">
<div class="full-bleed">Full bleed banner</div>
<div class="article">Article content</div>
</div>组合名称与数字
可以在同一个网格中自由混合使用命名网格线和网格线编号：
<div class="layout"><div class="item">Item</div></div>一条网格线使用多个名称
一条网格线可以有多个名称。当一条网格线同时作为一个区域的末端和另一个区域的起点时，这种方式非常有用：
<div class="grid">
<div>Sidebar</div>
<div>Content</div>
</div>区域生成的隐式命名网格线
如果定义了名为 "main" 的区域，系统会自动创建 main-start（列和行）以及 main-end 网格线，从而可以将它们用于重叠项目。
在 DevTools 中调试命名网格线
Chrome 和 Firefox 的 DevTools 可以在叠加层中将命名网格线显示为标签。请在布局面板中启用网格线标签，以确认名称是否正确。
快速检查
在 grid-template-areas 中定义名为 "sidebar" 的网格区域时，会自动创建哪些网格线名称？
回顾
请在轨道定义内使用方括号为网格线命名，以便更易读地放置项目。命名区域会自动生成带有 -start 和 -end 的网格线名称。一条网格线可以有多个名称。命名网格线可以与 span 和数字自由组合。请使用 DevTools 将命名网格线以叠加层的形式可视化。
常见问题解答
「命名网格线与命名网格区域」课时是免费的吗？
是的 — 「命名网格线与命名网格区域」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「命名网格线与命名网格区域」这节课中我会学到什么？
为网格线和网格区域命名，让网格布局定位更易读、更易维护。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「命名网格线与命名网格区域」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。