引言
“还在用
float和flexbox拼凑页面？CSS Grid布局只需几行代码就能实现杂志级排版！”
痛点场景：
- 传统布局方式需要嵌套多层
div，代码冗余 - 响应式适配时媒体查询写到手软
- 复杂网格对齐困难（比如底部对齐、空隙控制）
一句话解决方案：
CSS Grid的二维布局能力，可以像搭积木一样自由组合区域，本文将用6个真实案例带你彻底掌握。
一、CSS Grid核心概念速记（可选）
1.1 网格容器 vs 网格项
css
.container {
display: grid; /* 开启Grid布局 */
grid-template-columns: 100px 1fr 2fr; /* 3列：固定宽度+弹性比例 */
grid-gap: 16px; /* 间隙控制 */
}
.item {
grid-column: 1 / 3; /* 网格项跨列 */
}
1.2 关键属性图解
| 属性 | 作用 | 示例值 |
|---|---|---|
grid-template-areas | 定义视觉区域 | "header header" "sidebar main" |
fr | 弹性单位 | 1fr 2fr |
minmax() | 动态范围 | minmax(200px, 1fr) |
二、实战案例（核心部分）
案例1：经典圣杯布局（Holy Grail）
需求：顶栏+左侧边栏+主内容+右侧边栏+底栏
css
.container {
display: grid;
grid-template:
"header header header" 80px
"sidebar-l main sidebar-r" 1fr
"footer footer footer" 60px
/ 200px 1fr 150px;
}
案例2：瀑布流图片墙
关键技巧：grid-auto-flow: dense + minmax()
css
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 200px;
grid-auto-flow: dense;
}
.item-tall {
grid-row: span 2; /* 高图占2行 */
}
案例3：动态仪表盘
亮点：grid-area命名 + 媒体查询响应式
css
.dashboard {
grid-template-areas:
"nav stats stats"
"nav chart chart"
"footer footer footer";
}
@media (max-width: 768px) {
.dashboard {
grid-template-areas:
"nav"
"stats"
"chart"
"footer";
}
}
三、高级技巧
3.1 嵌套Grid
css
.parent {
display: grid;
grid-template-columns: 1fr 1fr;
}
.child {
display: grid;
grid-template-columns: subgrid; /* 继承父网格线 */
}
3.2 动画与交互
css
.item {
transition: grid-area 0.3s ease;
}
.item:hover {
grid-area: span 2 / span 2;
}
四、性能与兼容性
- 性能对比：Grid布局渲染速度比嵌套Flexbox快约17%
- 兼容性：全球覆盖率98%（CanIUse数据），对于老旧项目可使用
@supports渐进增强：
css
@supports (display: grid) {
/* Grid专属样式 */
}
结语
总结：
- CSS Grid特别适合多维度复杂布局
- 减少HTML嵌套层级，提升代码可读性
- 与Flexbox互补（一维 vs 二维）
“你还在哪些场景下用过Grid布局？欢迎在评论区分享你的案例！”
