0Pricing
CSS Academy · 课时

Display Grid 与模板列、行

启用 CSS Grid，并使用 grid-template-columns 和 rows 定义列轨道与行轨道。

Display Grid 与模板列、行 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

启用 CSS 网格布局

在容器上设置 display: grid，即可启用 CSS 网格布局。其直接子元素会自动成为网格项目并放入网格单元格中。

<div class="layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Item A</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Item B</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Item C</div>
</div>

grid-template-columns

grid-template-columns 定义列的数量和尺寸。每个值都会创建一个列轨道。

<div class="layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px column</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>

grid-template-rows

grid-template-rows 定义显式行轨道。超出已定义行的项目会创建隐式行。

<div class="layout" style="min-height:220px;">
  <div style="grid-column:span 2;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (row: auto)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main left (row: 1fr)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main right (row: 1fr)</div>
  <div style="grid-column:span 2;background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer (row: auto)</div>
</div>

列轨道和行轨道

grid-template-columns 或 grid-template-rows 中的每个值都会创建一个轨道。轨道可以使用任意尺寸单位：

  • 固定尺寸：200px、10rem
  • 弹性尺寸：1fr
  • 基于内容：auto、min-content、max-content

fr 单位

fr（分数单位）会在扣除固定尺寸后分配可用空间。1fr 2fr 会创建 1:2 比例的列。

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">300px fixed</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr (1x share)</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">2fr (2x share)</div>
</div>

轨道中的 auto

轨道中的 auto 会根据内容调整尺寸。作为列时，它的尺寸取最宽单元格所需的最小值；作为行时，它的尺寸适应最高单元格。

<div class="sidebar-layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar (auto width)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content (1fr fills the rest)</div>
</div>

页面布局示例

一种常见的三行页面布局，包含页眉、主体和页脚：

<div class="page">
  <header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
  <main style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (fills available space)</main>
  <footer style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</footer>
</div>

grid-template 简写

grid-template 可以同时组合行和列：

<div class="grid" style="display:grid;min-height:180px;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</div>
</div>

在 DevTools 中检查网格

Chrome 和 Firefox 的 DevTools 可以在页面上叠加显示网格轨道线。点击 Elements 面板中的网格标记，即可直观查看列、行、间距和命名区域。

网格布局与弹性盒布局的选择

如果需要同时控制行和列，请使用网格布局。对于一维布局（项目排列成一行或一列），请使用弹性盒布局。许多布局会同时使用两者。

网格线编号

网格会自动为网格线编号，从 1 开始。您可以引用这些编号来手动放置项目。列线的编号范围是 1 到 n+1，其中 n 是列数。

<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
  <div class="header" style="grid-column:1 / -1;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header — spans all columns (grid-column: 1 / -1)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item 2</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item 3</div>
</div>

快速检查

grid-template-columns: 200px 1fr 2fr 会创建什么？

总结

display: grid 会创建网格容器。grid-template-columns 和 grid-template-rows 用于定义轨道。fr 单位会按比例分配剩余空间。auto 会根据内容调整尺寸。网格非常适合控制二维布局。

常见问题解答

「Display Grid 与模板列、行」课时是免费的吗？

是的 — 「Display Grid 与模板列、行」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「Display Grid 与模板列、行」这节课中我会学到什么？

启用 CSS Grid，并使用 grid-template-columns 和 rows 定义列轨道与行轨道。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「Display Grid 与模板列、行」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. Display Grid 与模板列、行
  2. fr 单位与 Repeat
  3. 间距与网格放置
  4. 网格模板区域
← 返回 CSS Academy