用CSS Grid实现对角线交错布局的关键是显式设置每个对角元素的grid-row和grid-column（如1/1、2/2），容器设display: grid并合理定义行列，只渲染对角元素以确保其余格子真正“流空”。
用 CSS Grid 实现对角线交错布局的关键是控制 grid-row 和 grid-column 的偏移关系
对角线排列本质是让第 n 个元素落在第 n 行第 n 列（或行列差为定值），其余位置留空。Grid 天然支持显式定位，比 Flex 或 float 更可控，也比绝对定位更易响应式适配。
常见错误是试图用 nth-child 配合 margin-left 模拟对角，结果在换行、缩放或不同屏幕下完全错位；或者滥用 transform: translate()，导致元素仍占文档流位置，空白格子无法“流空”。
- 每个对角元素需显式设置
grid-row和grid-column，例如grid-row: 1; grid-column: 1;、grid-row: 2; grid-column: 2; - 容器必须设
display: grid，并定义足够行列（如grid-template-rows: repeat(5, 1fr)），否则未声明的行/列会自动创建但尺寸不可控 - 不指定位置的元素默认按源顺序填入，若不想让它们挤占对角空位，得用
grid-auto-flow: dense配合显式定位——但更稳妥的做法是只把对角元素放进 HTML，其余格子天然为空
如何让非对角位置真正“流空”而不占位
“流空”不是靠隐藏或透明，而是让那些格子根本不存在于布局中。CSS Grid 里，没被任何元素占据的网格单元就是空的，不会撑开容器或影响其他元素。
典型翻车场景：把所有元素都写进 HTML，再用 display: none 隐藏非对角项——这会导致 DOM 节点仍在，grid-auto-flow 可能仍为其分配位置，且影响可访问性与 SEO。
立即学习“前端免费学习笔记（深入）”；
- 只渲染对角元素（比如用 JS 动态生成
<div class="diag" style="grid-row: 1; grid-column: 1;">），其他格子无对应 DOM 节点 - 避免给容器设固定宽高，改用
minmax()或auto行高列宽，让空行/列自然坍缩 - 若需保持网格结构稳定（比如后续要 JS 动态插入），可用
grid-template-areas预留区域，但对角以外区域不分配名字，等同于空
grid-area 比单独设行列更简洁，但要注意命名冲突
当对角元素数量固定且不多时，用 grid-area 一行写完行列起止（如 grid-area: 1 / 1 / 2 / 2）比分开写 grid-row 和 grid-column 更紧凑。但它本质仍是行列定位，不是区域命名。
容易忽略的是：如果同时用了 grid-template-areas 定义了区域名，而某个元素的 grid-area 值恰好和区域名重名，就会触发区域布局逻辑，覆盖掉行列定位——此时对角效果直接失效。
- 纯对角定位场景下，别混用
grid-template-areas，除非你明确需要区域语义 -
grid-area: r1 / c1 / r2 / c2中的r2和c2是结束线号，不是跨度，所以单格对角始终是n / n / n+1 / n+1 - 若用 CSS 变量控制位置（如
--i: 3），可配合calc()动态算出grid-area: var(--i) / var(--i) / calc(var(--i) + 1) / calc(var(--i) + 1)，但注意 IE 不支持
响应式对角线要考虑网格线重排，不能只靠媒体查询调数值
在小屏上强行维持 5×5 对角会挤成一团，但简单用媒体查询改 grid-row 值会导致维护成本飙升。真正可行的是利用 Grid 的隐式轨道和 grid-auto-flow 自动重排。
一个被低估的技巧：用 grid-auto-flow: row dense + 显式 grid-column，让元素优先按行填充，而对角逻辑转为“每行只放一个，且列号递增”。这样缩放时只要控制最大列数，行数会自动适应。
- 容器设
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))，列数随宽度变，对角元素的grid-column仍写死数字（如 1、2、3…），超出列数的部分会自动进下一行 - 此时“对角”变成“每行首个”，视觉上仍是斜向分布，且空白格子天然流空
- 如果必须严格数学对角（如 (1,1)、(2,2)、(3,3)），那响应式只能切断——小屏下只显示前 N 个，用
@media配合display: none隐藏多余项，比硬撑布局更可靠
