CSS Grid 高级布局技巧

深入 Grid 的自动填充、网格区域与隐式网格，打造复杂且自适应的页面结构。 · 难度：入门 · +15XP

超越基础：Grid 高级模式

CSS Grid 布局已经彻底改变了网页设计。本教程将带你探索几个进阶特性，包括 auto-fill / auto-fit、命名网格区域以及隐式网格的行为控制。

1. 自动填充与自动适应

这两个函数与 repeat() 结合使用，可以让网格根据容器宽度自动调整列数，非常适合响应式设计。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

当容器宽度增加时，自动填充会添加更多列；自动适应则会让现有列变宽。

2. 命名网格区域（Grid Areas）

使用 grid-template-areas 可以像画图一样定义布局，极大提升可读性。

.layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

你可以通过更改 grid-template-areas 来快速调整布局，例如将侧边栏移到右侧。

3. 隐式网格与自动放置

当项目超出显式定义的网格时，Grid 会自动创建隐式轨道。你可以通过 grid-auto-rows、grid-auto-columns 和 grid-auto-flow 控制它们的大小和排列方向。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 120px;           /* 所有隐式行高 120px */
  grid-auto-flow: dense;           /* 尽量填充空白区域 */
}

dense 模式会打破 DOM 顺序以填满空隙，适合瀑布流或图库布局。

4. 实战：响应式 Dashboard

结合以上技术，你可以构建一个自动适应屏幕的仪表板：

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  grid-auto-flow: dense;
}

.widget-wide {
  grid-column: span 2;
}
.widget-tall {
  grid-row: span 2;
}

尝试在右侧编辑器中调整视口宽度，观察网格如何自动重新排列。