CSS Grid 布局是目前最强大的 CSS 布局系统。它是一个二维系统，意味着它可以同时处理列和行——这跟 Flex 布局 mainly 处理一维（要么是列，要么是行）有所不同。在日常开发中，Grid 布局特别适合用于构建页面整体框架、卡片列表、表单排版等场景。
基础概念回顾
在开始之前，快速回顾一下 Grid 的几个核心概念。Grid 容器（container）是通过 display: grid 来定义的，其直接子元素自动成为 Grid 项目。我们通过 grid-template-columns 和 grid-template-rows 来定义列和行的轨道大小。
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
gap: 1.5rem;
min-height: 100vh;
}这段代码定义了一个三列布局：左右各 200px 固定宽度，中间自适应。三行的高度分别是内容高度、自适应剩余空间、内容高度。gap 属性用来设置项目之间的间距，比传统的外边距方案简洁得多。
fr 单位与自适应
fr 是 Grid 引入的一个弹性单位，代表可用空间的一个等份。它是实现自适应布局的关键。比如，想让一个列表在桌面端显示三列、平板端显示两列、手机端显示一列，可以结合 repeat() 和 minmax() 来实现：
.card-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}这个写法的意思是：尽可能多地放入列，每列最小 300px，最大平分剩余空间。浏览器会自动根据容器宽度计算列数，不需要写任何媒体查询就能实现响应式。
场景一：经典圣杯布局
圣杯布局是网页设计中的经典难题——头部、底部各占满宽度，中间区域分为左中右三栏。用 Grid 实现只需要几行代码：
.layout {
display: grid;
grid-template:
"header header header" auto
"nav main aside" 1fr
"footer footer footer" auto
/ 200px 1fr 200px;
min-height: 100vh;
}配合 grid-area 给每个子元素指定对应的区域名称，整个布局就完成了。代码量比传统的浮动或者 Flex 方案少很多，而且语义非常清晰。
场景二：不等宽卡片列表
有时候我们需要一个画廊式的卡片列表，其中某些卡片占据两列或两行来突出显示。Grid 的 grid-column 和 grid-row 属性可以精确控制项目的跨行跨列行为：
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.featured {
grid-column: span 2;
grid-row: span 2;
}这样，标记为 featured 的卡片会自动占据 2×2 的网格区域，其余卡片自动填充剩余空间。不需要 JavaScript 做任何计算。
场景三：表单对齐
表单排版是 Grid 的一个隐藏强项。标签和输入框的对齐问题用 Grid 可以轻松解决：
.form {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.75rem 1rem;
align-items: center;
}
.form label {
text-align: right;
white-space: nowrap;
}
.form .full-width {
grid-column: 1 / -1;
}标签右对齐、输入框自适应宽度，提交按钮之类的元素用 grid-column: 1 / -1 跨满整行。简单直接。
兼容性小结
CSS Grid 的浏览器兼容性已经相当好了。截至 2026 年，全球浏览器支持率超过 97%。如果你的项目不需要支持非常老旧的浏览器，Grid 布局完全可以放心使用。对于一些极端场景，可以用 @supports 做降级处理。
建议：新项目中优先用 Grid 做页面级布局，Flex 做组件内部的对齐。两者不是替代关系，而是互补的。
写在最后
Grid 布局的学习曲线比 Flex 稍微陡峭一些，但一旦掌握了它的核心概念，你会发现很多以前需要复杂 hack 才能实现的布局，现在几行 CSS 就能搞定。希望这篇笔记对你有帮助。如果有任何疑问，欢迎留言讨论。