CSS Grid：模板区域、auto-fit 与 minmax
为网格区域命名以创建易读的布局，使用 auto-fit 与 minmax() 实现响应式列，并控制隐式轨道。
CSS Grid：模板区域、auto-fit 与 minmax 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
命名模板区域——可视化布局
grid-template-areas 让您可以用直观的 ASCII 图示格式为区域命名。每个字符串是一行；每个单词是一个单元格。点号（.）表示空单元格。使用 grid-area: name 为元素分配区域。
.layout {
display: grid;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 48px;
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }使用媒体查询设置响应式模板区域
在断点处改变模板区域布局，使移动端的侧边栏从单独一列移到主内容下方。
.layout {
grid-template-areas:
'header'
'main'
'sidebar'
'footer';
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.layout {
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 220px 1fr;
}
}自动适配与自动填充的区别
auto-fit：折叠空轨道，使项目拉伸并填满整行。auto-fill：即使轨道为空，也保留网格结构。对于响应式卡片网格，auto-fit 几乎总是您想要的选择。
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}最小值—最大值函数深入讲解
minmax(min, max) 定义一个至少为 min、最多为 max 的轨道。常见组合包括：minmax(0, 1fr)（完全灵活）、minmax(200px, 1fr)（带最小值的响应式布局）、minmax(auto, auto)（根据内容调整大小）。
跨越列与行
使用 grid-column: span 2 让项目跨越两列。结合 grid-row: span 2，可以创建一个在网格中占据 2×2 区块的特色项目。
.featured {
grid-column: span 2;
grid-row: span 2;
}
/* Or explicit placement: */
.featured {
grid-column: 1 / 3; /* from line 1 to line 3 */
grid-row: 1 / 3;
}密集自动放置
grid-auto-flow: dense 会使用较小的项目填补空隙。它适用于项目大小不一的类砌体布局。
.mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
}分数单位与百分比
分数单位始终指扣除固定大小的轨道和间距后剩余的可用空间。将分数单位与固定大小混用，可以获得最大的灵活性：侧边栏固定，主内容区域灵活。
隐式网格列与行
这些属性控制隐式创建的轨道大小（当项目被放置在显式网格之外时会创建这些轨道）。grid-auto-rows: minmax(100px, auto) 会为隐式行设置最小高度。
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 8px;
}在 DevTools 中检查网格
当您点击元素面板中网格容器旁的“网格”标记时，DevTools 会在页面上叠加网格线和区域名称。请使用它调试意外的轨道大小和项目放置问题。
CSS 子网格
grid-template-columns: subgrid 让嵌套网格可以与父网格的轨道对齐。自 2023 年起，所有现代浏览器都支持此功能——它对于在卡片网格中对齐各张卡片的内部内容至关重要。
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* aligns to parent rows */
}网格布局何时优于弹性盒布局
当您需要明确的二维控制、同时关注行和列时，网格布局更合适。如果您只是想让项目排列成一行或一列，弹性盒布局会更简单。
快速检查
哪个 CSS 网格值会创建尽可能多的列，每列最小宽度为 200 像素，并让各列平分剩余空间？
回顾：高级 CSS 网格布局
grid-template-areas 会创建易读的命名布局。自动适配结合最小—最大函数，可以在不使用媒体查询的情况下创建响应式网格。让项目跨越多列和多行。密集自动放置可以填补空隙。使用 DevTools 网格叠加层进行调试。子网格可以让嵌套项目与父网格轨道对齐。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 41
- 课程
- 163
常见问题解答
「CSS Grid：模板区域、auto-fit 与 minmax」课时是免费的吗？
是的 — 「CSS Grid：模板区域、auto-fit 与 minmax」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「CSS Grid：模板区域、auto-fit 与 minmax」这节课中我会学到什么？
为网格区域命名以创建易读的布局，使用 auto-fit 与 minmax() 实现响应式列，并控制隐式轨道。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「CSS Grid：模板区域、auto-fit 与 minmax」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- Flexbox 深入：对齐、换行与顺序
- CSS Grid：模板区域、auto-fit 与 minmax
- 组合使用 Flexbox 与 Grid
- 用于主题设置的 CSS 变量