CSS Grid 网格布局改变了过去依赖浮动和定位搭建复杂页面的方式。它把容器划分为二维的行列轨道，子元素可以通过行列编号或命名区域放置，不再需要清除浮动、负外边距或额外包裹容器。对于后台管理界面、卡片墙、仪表板这类同时涉及多行多列且要求对齐一致的场景，Grid 提供了更自然、更可维护的方案。本文会从轨道定义、区域命名、隐式网格以及响应式实践几个角度，讲清如何用 Grid 构建复杂布局。
理解网格轨道：行、列与 fr 单位
使用 Grid 的第一步是把容器声明为网格容器，display: grid 或 display: inline-grid 即可。声明之后，直接子元素会自动成为网格项，沿容器的行线和列线排列。控制轨道尺寸的核心属性是 grid-template-columns 和 grid-template-rows，前者定义列宽，后者定义行高。例如一个左侧固定 240px、右侧自适应的主内容布局，可以写成三列结构，其中 1fr 表示剩余可用空间的一份比例。
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
gap: 16px;
}
fr 单位是 Grid 中非常有用的弹性长度，它代表“可用空间中的份数”。如果两列都设置为 1fr，它们会均分剩余空间；如果设置为 2fr 1fr，则前者占三分之二，后者占三分之一。与百分比不同，fr 会自动扣除固定尺寸轨道和间距后再分配，因此不会因为间距或固定列的存在导致溢出。
编写大量相同尺寸轨道时，可以借助 repeat() 函数避免重复书写。例如创建 12 等分网格可以使用 repeat(12, 1fr)。为了处理内容宽度不确定的情况，minmax() 函数可以为轨道设置最小值与最大值，既能约束最小尺寸，又允许弹性增长。下面代码把多列卡片网格的最小列宽控制在 200px，最大不超过 1fr。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
用 grid-template-areas 构建结构清晰的复杂页面
当页面包含头部、侧边栏、主内容、页脚等多个区域时，使用编号放置容易让 CSS 变得难以阅读。Grid 的 grid-template-areas 允许用命名字符串直接描述页面结构，每个字符串代表一行，空格分隔的命名代表单元格。子元素只需通过 grid-area 指定自己的区域名，浏览器就会自动完成放置。下面是一个典型后台布局的 HTML 结构与对应样式。
<div class="admin-layout"> <header class="site-header">Header</header> <aside class="sidebar">Sidebar</aside> <main class="main-content">Main Content</main> <footer class="site-footer">Footer</footer> </div>
.admin-layout {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 12px;
}
.site-header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main-content { grid-area: main; }
.site-footer { grid-area: footer; }
grid-template-areas 的最大好处是视觉结构直接呈现在 CSS 中，修改布局只需调整字符串排列。例如在移动端想把侧边栏放到主内容下方，只需修改媒体查询中的区域字符串顺序，而不用改动 DOM 结构。需要注意的是，每行字符串的单元格数量必须一致，空单元格用一个点号表示，例如 "header header" "sidebar ." 表示第二行右侧留空。
区域命名还支持跨行列，同一个命名出现在连续单元格中即可自动合并。比如让头部横跨整行，只需让该行所有单元格都命名为 header。这让布局意图非常直观，也减少了手动计算行列线的出错概率。对于需要频繁调整的复杂后台界面，使用区域模板比维护一堆数字编号更利于团队协作。
隐式网格与自动放置：应对动态内容
显式定义的轨道数量有限，当网格项超出已定义的行列范围时，Grid 会自动创建隐式轨道来容纳它们。默认情况下，隐式行高为 auto，由内容撑开；通过 grid-auto-rows 可以设置固定行高，或使用 minmax() 限制范围。自动放置方向由 grid-auto-flow 控制，默认值为 row，即先填满一行再换行；改为 column 则按列优先放置。
在动态卡片列表中，内容数量往往由后端返回，无法预先确定行列数。此时不必为每个卡片手动指定位置，让自动放置根据 grid-template-columns 定义的列轨道逐行生成即可。配合 auto-fit 或 auto-fill，浏览器会根据容器宽度自动计算可容纳的列数，实现无媒体查询的响应式网格。
.dynamic-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-auto-rows: 220px;
grid-auto-flow: row dense;
gap: 16px;
}
auto-fill 与 auto-fit 的区别在于：前者会保留空的轨道占位，即使没有足够多网格项；后者会折叠空轨道，让现有网格项伸展填充整行。grid-auto-flow: dense 可以开启密集填充算法，把后续较小体积的网格项前移填补之前留下的空洞，有效减少空白，但会改变视觉顺序，可能影响键盘导航或屏幕阅读器的阅读顺序，因此在可访问性要求严格的场景中应谨慎使用。
隐式轨道还涉及网格对齐。当隐式行高度不统一时，可以使用 align-items 控制网格项在行内的垂直对齐，justify-items 控制水平对齐。容器级别的 align-content 与 justify-content 则用于调整整个网格轨道在容器中的分布，例如顶部对齐、居中或均匀分布。
响应式设计、对齐与 Flexbox 的边界
响应式布局中，Grid 可以结合媒体查询修改轨道定义。例如桌面端三列布局在窄屏下改为单列，只需改变 grid-template-columns 的值，或者直接调整区域模板。不过更高效的做法是利用 auto-fit/minmax 让浏览器自动计算列数，避免为每个断点编写重复样式。这种方式在卡片墙、商品列表等以内容数量为主导的场景中尤其顺手。
@media (max-width: 600px) {
.admin-layout {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto;
grid-template-areas:
"header"
"sidebar"
"main"
"footer";
}
}
对齐属性是 Grid 强大能力的另一体现。justify-items 和 align-items 作用于所有网格项，默认值为 stretch，也就是自动拉伸填满单元格。对单个网格项可以使用 justify-self 或 align-self 覆盖容器设置，例如让某个按钮不拉伸而保持自身宽度。这些属性让 Grid 在处理表单控件、按钮组等混合尺寸内容时非常灵活。
Grid 与 Flexbox 并不是互斥关系。Flexbox 适合一维排列，例如导航栏、工具栏、文章操作按钮组等只考虑一个方向布局的场景。Grid 则更适合需要同时管理行与列的二维结构。如果强行用 Grid 实现简单横向链接列表，反而会增加维护成本。实际项目中两者经常嵌套使用：外层用 Grid 搭建页面骨架，内部局部用 Flexbox 排列小组件。
调试 Grid 布局时，现代浏览器开发者工具都提供了网格高亮功能。打开检查器后，网格容器会显示行列虚线、轨道编号和区域名称，可以直观看到隐式轨道如何生成、网格项占用了哪些单元格。相比过去反复修改数值猜测位置，这种可视化反馈能大幅提升调试效率。避免再使用负外边距或绝对定位去修正原本网格就能解决的排列问题。