CSS Grid 是实现矩阵式导航的唯一可靠方案，需用 grid-template-columns 和 grid-auto-rows 锁定行列结构，配合 gap 控制间距，每个导航项须为语义化块级容器，并通过 auto-fit + minmax() 实现健壮响应式。
用 CSS Grid 实现矩阵式导航，别碰 float 或 inline-block
矩阵式导航本质是等宽等高、行列对齐的模块方阵，比如“产品中心”下分 3×3 的功能入口，或后台首页的图标快捷栏。CSS Grid 是唯一能天然约束行高和列宽的方案；用 float 或 display: inline-block 强行拼，会因内容高度不一导致错行、间隙不可控、响应式时列数崩坏。
常见错误现象包括：
- 某模块文字多两行，整行被顶高，下方模块错位
- 缩放页面后，第 4 列突然掉到下一行，但容器没设
flex-wrap，也没定义断点逻辑 - 用
margin模拟栅格间距，结果末尾多出空白边距，或小屏下负 margin 把模块切掉
正确做法是外层容器设 display: grid，用 grid-template-columns 和 grid-auto-rows 锁定结构：
nav.matrix {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(80px, auto);
gap: 1rem;
}
要点：
立即学习“前端免费学习笔记（深入）”；
-
repeat(3, 1fr)表示固定 3 列，均分宽度；如需响应式，改用repeat(auto-fit, minmax(200px, 1fr))) -
minmax(80px, auto)确保每行至少 80px 高，内容撑开时可自适应，避免文字溢出 -
gap必须作用于 grid 容器，不是每个 item 上加 margin —— 否则无法规避末尾冗余间距 - IE11 不支持
gap，若需兼容，得退回到grid-column-gap/grid-row-gap（仅 IE11 支持）
每个导航项必须有明确容器边界，别直接塞 a 标签
矩阵式导航常被写成 <nav><a>首页</a><a>产品</a><a>关于</a></nav>，这会导致语义断裂、无障碍失效、样式难统一。读屏器会把它们读作“链接、链接、链接”，无法识别这是“一组功能入口组成的网格”。
每个单元格应是一个语义完整、样式封闭的块级容器：
<nav class="matrix">
<div class="item">
<a href="/dashboard">
<span class="icon">?</span>
<span class="label">仪表盘</span>
</a>
</div>
<div class="item">
<a href="/users">
<span class="icon">?</span>
<span class="label">用户管理</span>
</a>
</div>
</nav>
理由：
<div class="item"> 提供独立 padding、border、hover 区域，避免点击热区过小 <li>图标与文字用 <code><span></span>包裹，方便单独控制尺寸/颜色/垂直居中- 所有交互行为（如 hover 背景、焦点 outline）都绑定在
.item上，而非a，防止 Safari 下 focus ring 错位 - 将来加状态标识（如“新功能”角标），直接在
.item内加<sup class="badge">NEW</sup>即可，不破坏网格结构
响应式矩阵：用 auto-fit + minmax() 替代媒体查询硬编码列数
为不同屏幕写死 @media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); } 看似简单，实则脆弱——一旦新增模块或调整字体大小，断点就失效。更健壮的做法是让 Grid 自动计算列数。
核心写法：
nav.matrix {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)));
}
含义是：“每列最小 160px，最大占满可用空间的 1fr；尽可能多放列，放不下就换行”。浏览器会根据容器宽度实时计算列数，比如：
- 容器宽 500px → 最多放 3 列（3 × 160 = 480 ≤ 500）
- 容器宽 300px → 只能放 1 列（2 × 160 = 320 > 300）
注意点：
-
auto-fit和auto-fill行为不同：auto-fit会收缩空列，auto-fill会保留空轨道 —— 导航场景必须用auto-fit - 不要给
.item设固定 width，否则会覆盖 Grid 的自动分配逻辑 - 如果某项内容特别长（如“系统监控与日志分析中心”），加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;防止撑破网格
当前页高亮不能靠 HTML 硬编码，JS 匹配路径要防哈希和本地协议
矩阵里某个入口需标记“当前所在模块”，比如点进“用户管理”后，对应 .item 加 aria-current="page"。但千万别在每个 HTML 文件里手动写 class="active" —— 路由切换时不会更新，本地开发用 file:// 打开还会因 window.location.origin 为空导致匹配永远失败。
轻量 JS 判断逻辑（放在页面底部）：
document.querySelectorAll('.matrix .item a').forEach(link => {
const href = new URL(link.href, window.location.origin || 'http://localhost');
const path = href.pathname.replace(/\/$/, '');
const current = window.location.pathname.replace(/\/$/, '');
if (path === current || (current === '/' && path === '')) {
link.parentElement.setAttribute('aria-current', 'page');
}
});
关键处理：
- 用
new URL()解析href，兼容相对路径、带查询参数、带哈希的链接 -
replace(/\/$/, '')统一去除末尾斜杠，避免/users≠/users/ - 显式处理根路径
/，因为window.location.pathname在首页就是/，而很多链接 href 是空字符串或# - 只设
aria-current="page"，不加class="active"—— 语义化属性足够供 CSS 选择器[aria-current="page"]使用，也利于读屏器识别
真正容易被忽略的是：矩阵式导航常嵌在 iframe 或微前端子应用里，window.location 是父页面的，此时必须通过 postMessage 或 URL 参数透传当前路径，否则 JS 判断完全失准。
