本文将通过多个实用案例，帮助你快速掌握 CSS Grid 布局的核心概念和应用技巧。
一、基础网格布局
CSS Grid 是一个二维布局系统，可以同时控制行和列，比 Flexbox 的一维布局更强大。
<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div>
</div><style>
.container {display: grid;grid-template-columns: repeat(3, 1fr); /* 3等宽列 */grid-template-rows: 100px 200px; /* 2行：100px和200px */gap: 10px; /* 单元格间距 */
}
.item {background-color: #4CAF50;color: white;padding: 20px;text-align: center;
}
</style>
二、响应式卡片网格
使用 auto-fill 和 minmax() 创建自适应布局：
.card-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 1.5rem;padding: 1rem;
}.card {display: grid;grid-template-rows: auto 1fr auto;min-height: 200px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);border-radius: 8px;padding: 1rem;
}
三、网站经典布局
使用命名区域实现圣杯布局（Header、Sidebar、Main、Footer）：
.container {display: grid;grid-template: "header header header" 80px"sidebar main aside" 1fr"footer footer footer" 60px / 200px 1fr 150px;min-height: 100vh;
}.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
四、瀑布流布局
实现 Pinterest 风格的瀑布流：
.masonry-grid {display: grid;grid-template-columns: repeat(4, 1fr);grid-auto-rows: 50px;gap: 1rem;
}.item {grid-row-end: span var(--row-span); /* 通过CSS变量控制跨度 */background-color: #f1f1f1;border-radius: 4px;padding: 1rem;
}/* 通过CSS变量控制每个项目高度 */
.item:nth-child(1) { --row-span: 4; }
.item:nth-child(2) { --row-span: 6; }
.item:nth-child(3) { --row-span: 3; }
/* 更多项目... */
好的，CSS Grid 的功能远不止基础的网格布局，它还能轻松实现许多令人惊艳的复杂效果。除了先前提到的案例，这里再补充几个实用且强大的案例，供你参考和尝试：
五、嵌套网格与 Subgrid 实现精密对齐
场景：当网格布局内部存在嵌套结构，并且你希望子网格能完美继承父网格的轨道尺寸以实现精密对齐时，subgrid 价值巨大。
代码示例：
<div class="parent-grid"><div class="child-subgrid"><div class="child-item">A</div><div class="child-item">B</div><div class="child-item">C</div></div>
</div>
.parent-grid {display: grid;grid-template-columns: repeat(9, 1fr); /* 父网格定义为9列 */gap: 20px;
}.child-subgrid {grid-column: 2 / 7; /* 子网格容器跨越父网格的第2至第7列 */display: grid;grid-template-columns: subgrid; /* 关键：继承父网格这5列的轨道尺寸 */gap: 15px; /* 可以自定义子网格的间隙 */
}.child-item {grid-column: 2 / 4; /* 子网格项在继承的轨道内定位 */background-color: #f5f5f5;padding: 1rem;
}
效果与要点：此例中，.child-subgrid 通过 grid-template-columns: subgrid; 继承了父网格相应区域的列轨道定义（共5列）。这使得其内部的 .child-item 可以基于父网格的列线进行精确定位，实现了跨层级的对齐，尤其适用于仪表盘、数据表格等需要严格对齐的组件。请注意 subgrid 的浏览器支持度（Chrome 118+、Firefox 71+、Safari 16.5+）。
六、结合 Grid 与 Masonry 的瀑布流布局
场景：展示高度不一的图片或卡片，并希望实现错落有致、自动填充空白区域的瀑布流（Pinterest 风格）效果。
代码示例：
<div class="masonry-grid"><div class="masonry-item">...</div><div class="masonry-item wide-item">...</div> <!-- 一个跨两列的项目 --><div class="masonry-item">...</div><!-- 更多项目 -->
</div>
.masonry-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 自适应列宽 */grid-auto-rows: 200px; /* 设置默认行高 */grid-auto-flow: dense; /* 关键：启用密集填充模式，尽可能填充空白区域 */gap: 1rem;
}.masonry-item {background-color: #fff;border-radius: 8px;overflow: hidden;/* 可添加其他样式 */
}.wide-item {grid-column: span 2; /* 某些项目可以跨越多列 */
}.tall-item {grid-row: span 2; /* 某些项目可以跨越多行 */
}
效果与要点：通过 grid-auto-flow: dense，浏览器会尝试自动填充布局中较早出现的空白空间，从而实现类似瀑布流的效果。你可以通过给特定项目添加 .wide-item 或 .tall-item 类来控制其跨越的列数或行数，使布局更具动态性。注意：CSS 原生的 grid-template-rows: masonry; 仍在开发中。
七、高度自适应的卡片组件内部布局
场景：卡片的内部内容区域高度不一，但希望确保卡片的操作按钮始终对齐底部。
代码示例：
<div class="card-grid"><div class="card"><div class="card-title">卡片标题</div><div class="card-content">这里是可变长度的内容...</div><div class="card-actions"><button>确定</button><button>取消</button></div></div><!-- 更多卡片 -->
</div>
.card-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 卡片外部网格 */gap: 2rem;
}.card {display: grid; /* 卡片本身也是一个网格容器 */grid-template-rows: auto 1fr auto; /* 关键：三行 - 标题(自适应)、内容(占满剩余空间)、按钮(自适应) */border: 1px solid #e0e0e0;border-radius: 8px;overflow: hidden;height: 250px; /* 可固定高度，也可由内容撑开 */
}.card-title {padding: 1rem;font-size: 1.2rem;font-weight: bold;
}.card-content {padding: 0 1rem;/* 内容区域会自动伸缩 */
}.card-actions {padding: 1rem;background: #f5f5f5;display: flex; /* 内部按钮可用 Flex 布局 */justify-content: flex-end;gap: 0.5rem;
}
效果与要点：此案例展示了 Grid 的嵌套使用。外部 .card-grid 控制卡片的整体排列，内部每个 .card 也成为一个网格容器。通过 grid-template-rows: auto 1fr auto;，无论中间内容区域如何变化，标题栏和按钮栏都会保持自身高度，内容区域则会灵活伸缩占满可用空间，从而确保所有卡片的按钮始终底部对齐。
八、网格对齐技巧
精确控制网格内容对齐方式：
.container {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, 100px);gap: 10px;/* 单元格内项目对齐 */justify-items: center; /* 水平居中 */align-items: center; /* 垂直居中 *//* 整个网格在容器中对齐 */justify-content: space-between;align-content: space-around;height: 300px;border: 1px solid #ccc;
}
九、实用属性速查表
| 属性 | 说明 | 示例 |
|---|---|---|
grid-template-columns |
定义列宽 | 1fr 2fr 1fr |
grid-template-rows |
定义行高 | 100px auto |
gap |
设置间距 | 10px 20px |
grid-column |
跨列范围 | 1 / 3 |
grid-row |
跨行范围 | span 2 |
grid-area |
命名区域 | header |
justify-items |
水平对齐项目 | center |
align-items |
垂直对齐项目 | stretch |
十、浏览器支持与渐进增强
CSS Grid 已被所有现代浏览器广泛支持（覆盖率超过97%）。对于旧版浏览器，可以使用特性查询提供降级方案：
/* 降级方案：使用Flexbox */
.container {display: flex;flex-wrap: wrap;
}/* 现代浏览器使用Grid */
@supports (display: grid) {.container {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;}
}
总结
CSS Grid 布局提供了强大的二维布局能力，适合构建从简单卡片到复杂仪表盘的各种界面。通过结合 fr 单位、minmax() 函数和命名区域等功能，可以创建出灵活且响应式的布局系统。
实践中，建议将 Grid 用于宏观页面布局，而使用 Flexbox 处理微观组件内的排列，两者结合可以获得最佳效果。