0Pricing
CSS Academy · 课时

隐式网格与 Grid-Auto-Flow

了解 CSS Grid 如何通过隐式行和列处理超出显式轨道的项目。

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

显式网格与隐式网格

显式网格由 grid-template-columns 和 grid-template-rows 定义。当项目超出这些已定义的轨道时，浏览器会自动创建隐式轨道。

grid-auto-rows

定义隐式创建的行轨道尺寸。如果不设置此属性，隐式行会调整尺寸以适应其内容（auto）。

  <div class="gallery">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

使用 minmax 设置 grid-auto-rows

让隐式行至少具有一定高度，同时允许其扩展：

  <div class="feed">
    <div>1</div><div>2</div><div>3</div>
  </div>

grid-auto-columns

当项目被放置在显式列范围之外时，定义隐式列轨道的尺寸：

  <div class="timeline">
    <div>Event 1</div><div>Event 2</div>
  </div>

grid-auto-flow

控制自动放置算法如何放置项目：

  • row（默认值）——按行放置，需要时添加新行
  • column——按列放置，添加新列
  • row dense——通过回溯积极填补空隙
  • column dense——沿列方向密集填充

grid-auto-flow: dense

dense 会让算法尝试填补跨越较大范围的项目留下的空洞。这可能导致项目显示顺序与原顺序不一致。

  <div class="masonry">
    <div class="featured">Featured</div><div>2</div><div>3</div><div>4</div>
  </div>

自动按列流动模式

一种水平滚动的卡片条，其列会根据需要增长：

  <div class="strip">
    <div>Card 1</div><div>Card 2</div><div>Card 3</div>
  </div>

图库的密集排列

一种包含不同尺寸图像并会填补空隙的照片图库：

  <div class="gallery">
    <div class="wide">Wide</div>
    <div class="tall">Tall</div>
    <div>3</div><div>4</div>
  </div>

隐式网格与命名区域

命名区域只适用于显式网格。放置在隐式网格中的项目不能直接使用命名区域放置，而需要使用网格线编号或 span 放置。

可视化隐式网格

在 Chrome DevTools 中，布局叠加层会同时显示显式网格线（实线）和隐式网格线（虚线）。这有助于您了解自动放置的项目最终位于何处。

逐个项目控制隐式尺寸

在隐式网格中跨越多行的项目需要使用 grid-auto-rows 才能正确设置尺寸。如果不设置它，隐式行会根据内容调整尺寸，从而可能造成不均匀的布局。

快速检查

grid-auto-flow: row dense 的作用是什么？

回顾

隐式网格会通过自动创建的轨道扩展显式网格。grid-auto-rows/columns 控制这些轨道的尺寸；minmax() 使它们具有弹性。grid-auto-flow 指定放置方向。dense 会积极填补空隙，适用于瀑布流式布局，但可能破坏视觉顺序。

常见问题解答

「隐式网格与 Grid-Auto-Flow」课时是免费的吗？

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

「隐式网格与 Grid-Auto-Flow」这节课中我会学到什么？

了解 CSS Grid 如何通过隐式行和列处理超出显式轨道的项目。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

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

「隐式网格与 Grid-Auto-Flow」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 命名网格线与命名网格区域
  2. 使用 minmax 的 Auto-fit 与 Auto-fill
  3. 隐式网格与 Grid-Auto-Flow
  4. 使用 Subgrid 对齐嵌套内容
← 返回 CSS Academy