网格布局
Grid
中级通用网格布局（Grid）是 CSS 中按行和列安排元素的布局方式。它解决多个区域需要同时对齐、分配宽度和留出间距的问题，比如让后台首页的指标卡片与图表按同一套列线排列。
你可能会说：「我想让后台首页的卡片和图表按几列排齐，窄屏时再自动减少列数。」
读之前建议先了解
动手看看后台首页的数据看板
今日访问 12,480
新增用户 326
成交订单 89
访问趋势图
来源占比图
列数 grid-template-columns
图表跨列 grid-column
这些卡片和图表共用一套列线。改列数、列宽或间距时，浏览器会按网格重新排放它们。
访问趋势图跨两列，所以它的宽度包含两列和中间那道间距；后面的图表会接着寻找放得下的位置。
要点网格布局是怎样安排内容的？
- 1
先给容器划出行和列
你把一组元素的父容器设为网格容器，再定义列、行和间距。浏览器会把子元素放进这些格子里。比如后台首页用三列放指标卡片，卡片之间就能保持一致的间隔。
- 2
元素可以占据多个格子
网格里的元素不一定只占一格。你可以让一张趋势图横跨两列，旁边留一列给最新告警。这样做的好处是，大小不同的模块仍能沿着同一组行列对齐。
- 3
屏幕变窄时可以改列数
网格的列数可以随可用宽度调整。例如宽屏显示三列卡片，窄屏改为一列。需要留意的是，视觉位置和阅读顺序可能不同；如果内容有先后关系，我们还要检查实际阅读顺序。
容易混淆的地方
Grid 适合同时考虑行和列：既要控制每列宽度，又要让不同区域沿列线对齐时，它很顺手。弹性布局（Flex）更适合主要沿一个方向排列的内容，比如一行按钮。表格则用来表达有行、列数据关系的内容；只是想把卡片排整齐，不必因此使用表格。
什么时候用
适合用
- 做后台首页时，指标卡片、趋势图和告警面板需要共用列线，同时允许图表占据更多宽度。
- 做产品功能展示区时，多张卡片要保持统一间距，并随屏幕宽度从多列变成单列。
- 做编辑工具的工作区时，侧边面板与主内容区需要按明确的列宽分配空间。
不适合用
- 导航栏里只是让标志靠左、几个链接靠右，主要沿一行排列，用弹性布局更直接。
- 要展示订单编号、金额、状态等逐行对应的数据，用语义化表格表达数据关系，而不是只用 Grid 摆出表格外观。
- 文章正文只是按自然顺序向下流动，不需要对齐多个区域时，普通文档流就够了。
练一练选一个答案，看看解释
你在做 AI 工具的控制台：首页有四张指标卡片、一张需要占两列的用量图，以及一张告警卡片；窄屏时要改为单列。你会选哪种布局思路？
让 AI 帮你做复制给 AI Agent 直接用
请用 CSS Grid 实现控制台首页布局：宽屏显示四张等宽指标卡片，下方用量图占两列、告警卡片占一列；统一列间距。窄屏改为单列，保持内容的阅读顺序，并说明你设置了哪些列与断点规则。