不能用做导航栏，因其语义仅为二维结构化数据，用于导航会导致读屏器误读、小屏渲染异常及DOM结构错乱；应使用display: grid配合实现语义清晰、响应式可控的导航布局。
别用 做导航栏，无论它看起来多“整齐”——这不是布局问题，是语义和可访问性红线。为什么 不能当导航网格用浏览器、读屏器、搜索引擎都靠标签语义理解页面结构。 的唯一合法语义是“二维结构化数据”，比如销售报表或课程表。把它塞进导航场景，会直接触发三类硬伤：
- 屏幕阅读器把“首页 | 关于 | 联系”读成“第1行：首页、关于、联系”，用户无法快速跳转单个链接
强制单行渲染，小屏下不折行就横向滚动，加 white-space: nowrap 只会让问题更糟
- DOM 中嵌套
时，浏览器可能自动把子表移出 ，导致 JS 查不到节点、CSS 样式失效、打印预览空白
display: grid 实现真正可控的导航网格
如果你需要的是“8 个导航项排成 4×2 网格”或“顶部主菜单 + 左侧快捷入口 + 底部工具组”这类明确区域划分，display: grid 是唯一合理选择——它专为二维布局设计，且保留语义清晰性。
- 用
或 分组，每组再用 grid-area 指定位置
- 例如 4 行 × 3 列容器：
#nav-grid { display: grid; grid-template-rows: 30% 30% 25% 15%; grid-template-columns: 1fr 1fr 1fr; }
- 每个导航区块（如
）设 grid-area: 2 / 1 / 3 / 3，表示占第2行、从第1列到第3列
- 所有子元素设
width: 100%; height: 100%，避免内容撑破网格单元
移动端网格怎么不崩？关键在 grid-template-areas + 媒体查询
固定行列数在小屏上必然拥挤，但不用删内容，只需重定义区域布局：
- 桌面端写：
grid-template-areas: "main main main" "tools tools quick" "foot foot foot";
- 小屏媒体查询里改成：
grid-template-areas: "main" "tools" "quick" "foot";，自动变单列流式
- 避免用
grid-auto-flow: column——它不保证顺序，键盘 Tab 和读屏器顺序可能错乱
- 每个
grid-area 名称必须唯一，重复会导致部分区块被覆盖或丢失
真正难的不是让东西“排整齐”，而是让它们在键盘、触屏、读屏器、缩放、打印、SEO 所有上下文里都行为一致。用 换来的那点视觉对齐，代价是后期补无障碍、调响应式、修 SEO 的三倍工时。
|
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
