CSS Grid
布局深度解析
CSS Grid 是第一个真正的二维布局系统。它让你同时控制行与列， 用声明式语法构建复杂的网页布局，彻底告别 float 和各种 hack。
grid-template-areas 可视化示意
核心概念
两个角色，一张网
Grid Container
设置了 display: grid 或 inline-grid 的元素。 它是网格的父容器，定义行和列的轨道。
grid-template-columns定义列轨道的数量和宽度
grid-template-rows定义行轨道的数量和高度
gap行与列之间的间距
Grid Items
Grid 容器的直接子元素。每个 item 都可以独立控制 自己跨越哪些行和列，实现复杂的布局编排。
grid-column控制元素跨越的列（起始/结束线）
grid-row控制元素跨越的行（起始/结束线）
grid-area简写属性，同时指定行和列位置
轨道尺寸单位
fr · minmax · repeat · auto-fill · auto-fit
fraction（分数单位），按比例分配剩余空间。1fr 2fr = 1:2 分配。
避免重复书写相同的轨道定义。repeat(3, 1fr)
设定轨道的最小和最大尺寸。minmax(200px, 1fr)
自动根据容器宽度填充尽可能多的列。auto-fill / auto-fit
fr 与 px 的行为差异
grid-template-columns: 200px 1fr 1fr
grid-template-columns: 1fr 2fr 1fr
grid-template-areas
用"ASCII 艺术"来画布局，直观到令人发指
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
gap: 16px;
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; }交互实验：调整 Gap
亲自感受 gap 对网格间距的影响
常用列模板
点击查看不同 grid-template-columns 的效果
1fr 2fr 1fr→ 侧边栏 + 主内容 + 侧边栏对齐系统
Grid 最强大的能力之一 — 完全控制对齐
justify-items水平方向 · 所有 item
align-items垂直方向 · 所有 item
place-items简写属性 (align + justify)
justify-content整个网格在容器中水平对齐
align-content整个网格在容器中垂直对齐
place-content简写属性 (align-content + justify-content)
网格线编号系统
理解网格线是精准放置元素的关键
.hero {
grid-column: 1 / 3;
/* 从列线 1 到列线 3 */
/* 即跨越前两列 */
}.sidebar {
grid-row: 1 / -1;
/* 从第 1 行到最后一行 */
/* 负号 = 从末尾计数 */
}tip：grid-column: span 2 表示"跨越 2 格"，等同于从当前线到 +2 条线，比手动指定数字更灵活！
Grid vs Flexbox
不是对立，而是互补
CSS Grid
- ✅ 二维布局（行 + 列同时控制）
- ✅ 先定义结构，再放内容
- ✅ 精确控制元素位置
- ✅ 适合整页/大区域布局
- ✅ grid-template-areas 直观可视化
Flexbox
- ✅ 一维布局（行 或 列）
- ✅ 内容驱动，自适应伸缩
- ✅ 灵活的对齐与分布
- ✅ 适合组件/小区域布局
- ✅ 处理内容量不确定的场景
💡 最佳实践：用 Grid 做页面骨架，用 Flexbox 做组件内部
它们是搭档，不是对手。
实战模式库
6 种最常见的 Grid 布局模式
等宽 N 列
repeat(N, 1fr)Holy Grail
200px 1fr 200pxSidebar + Content
250px 1frAuto-fill Grid
auto-fill, minmax(200px,1fr)Span Full Width
1 / -1Dashboard
repeat(4, 1fr)隐式网格与自动流
当内容超出显式定义时，Grid 如何自动扩展？
?什么是隐式轨道？
当你只定义了 grid-template-rows: 100px 100px（2行）， 但放入了 6 个 item 时，Grid 会自动生成隐式行来容纳多余的内容。
grid-auto-rows设置隐式行的高度。推荐：minmax(100px, auto)
grid-auto-flowrow（默认）· column · dense
dense 会回填空白间隙，紧凑排列
响应式 Grid：无需 Media Query
auto-fill vs auto-fit — 一行代码实现完美自适应
auto-fill — 填充尽可能多的列
即使只有一项内容，也会保留所有空轨道的空间。
auto-fit — 折叠空轨道并拉伸
内容少时会自动折叠空列，让已有内容拉伸填满。
auto-fill, minmax(120px, 1fr)
神级一行代码：
.grid {
grid-template-columns: repeat(
auto-fit, minmax(min(250px, 100%), 1fr)
);
}无需任何 media query，自动从 1 列到 N 列完美自适应！
完整属性速查表
一张表掌握 Grid 全部核心属性
| 属性 | 作用对象 | 说明 |
|---|---|---|
display: grid | 容器 | 声明一个块级网格容器 |
grid-template-columns | 容器 | 定义列轨道模板 |
grid-template-rows | 容器 | 定义行轨道模板 |
grid-template-areas | 容器 | 用命名区域定义布局 |
gap / row-gap / column-gap | 容器 | 轨道之间的间距 |
grid-auto-rows | 容器 | 隐式行的默认尺寸 |
grid-auto-columns | 容器 | 隐式列的默认尺寸 |
grid-auto-flow | 容器 | 自动放置算法（row/column/dense） |
grid-column | 子项 | 指定元素的列起止线 |
grid-row | 子项 | 指定元素的行起止线 |
grid-area | 子项 | 指定命名区域或行列简写 |
justify-items | 容器 | 所有子项的水平对齐 |
align-items | 容器 | 所有子项的垂直对齐 |
justify-self | 子项 | 单个子项的水平对齐 |
align-self | 子项 | 单个子项的垂直对齐 |