间距与网格放置
使用 gap 添加网格单元之间的间距，并使用 grid-column 和 grid-row 放置项目。
间距与网格放置 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
CSS 网格中的间距
gap 属性用于设置网格行和列之间的空间。它取代了较早的 grid-gap 属性，也适用于弹性盒布局。
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>row-gap 和 column-gap
分别设置行间距和列间距：
<div class="grid" style="display:grid;grid-template-columns:repeat(3, 1fr);">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>网格线编号
CSS 网格会为网格线编号，从 1 开始。一个三列网格有编号为 1、2、3、4 的列线。负数从末尾开始计数：-1 表示最后一条线，-2 表示倒数第二条线。
grid-column 和 grid-row
使用 grid-column 和 grid-row 以及网格线编号手动放置项目：
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:8px;">
<div class="header" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (spans all 3 columns, row 1)</div>
<div class="main" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (spans 2 columns, row 2)</div>
</div>span 关键字
使用 span 表示项目应覆盖的轨道数量，而不是使用绝对网格线编号：
<div style="display:grid;grid-template-columns:repeat(4, 60px);grid-auto-rows:60px;gap:8px;">
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div class="featured" style="background:#4f8cff22;border:1px solid #4f8cff;padding:4px;">Featured (span 2x2)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>负数网格线编号
负索引从末尾开始计数。无论列数是多少，1 / -1 始终会覆盖整个网格宽度：
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="full-width" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Full width (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item</div>
</div>grid-area 简写
grid-area 可以在一个属性中设置网格放置的四个值：row-start / column-start / row-end / column-end。
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:0;">
<div class="hero" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Hero (row 1 start, col 1 start, row 2 end, last column)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>自动放置
未明确放置的项目会按照 grid-auto-flow 算法自动放入下一个可用单元格。默认情况下，浏览器会从左到右、从上到下填充单元格。
网格中的 justify-items 和 align-items
在网格容器中，justify-items 用于水平对齐单元格内容；align-items 用于垂直对齐。两者的默认值都是 stretch。
<div class="grid" style="min-height:120px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;width:fit-content;">centered, top-aligned item</div>
</div>justify-self 和 align-self
单个网格项目可以使用 justify-self 和 align-self 覆盖容器的对齐方式：
<div style="display:grid;grid-template-columns:1fr;min-height:120px;">
<div class="featured-card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Stretched horizontally, centered vertically</div>
</div>重叠的网格项目
多个项目可以占据同一个网格单元格。使用 z-index 控制哪个项目显示在上层。这样可以实现图像与覆盖文字等分层设计。
<div style="display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 60px);">
<div class="image" style="background:#4f8cff44;border:1px solid #4f8cff;">Image layer</div>
<div class="caption" style="background:rgba(0,0,0,0.6);color:#fff;align-self:end;padding:4px 8px;">Caption overlay</div>
</div>快速检查
某个项目设置了 grid-column: 2 / span 3。在一个五列网格中，它会占据哪些列？
总结
gap 会在网格单元格之间添加间隔。项目可以使用 grid-column 和 grid-row 以及网格线编号进行放置。span 关键字用于指定要覆盖的轨道数量。使用 1 / -1 始终覆盖所有列。网格项目可以通过 z-index 重叠。
常见问题解答
「间距与网格放置」课时是免费的吗？
是的 — 「间距与网格放置」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「间距与网格放置」这节课中我会学到什么？
使用 gap 添加网格单元之间的间距，并使用 grid-column 和 grid-row 放置项目。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「间距与网格放置」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。