本文手把手教你使用 CSS Grid 实现如图所示的非对称六宫格布局，通过合理定义网格轨道与精准控制每个区块的 grid-row/grid-column 跨度，替代低效的“均分列”思路，达成专业级响应式结构。

在构建现代网页布局时，CSS Grid 是处理复杂、非对称结构的首选方案——尤其适用于如本例中需要灵活跨行跨列的六宫格设计（参考原始需求中的示意图）。这里有个常见的坑：很多人一上来就想用等宽列（比如 33% 33% 33%）强行拼凑，结果布局僵硬，根本无法适配内容的实际高度差异。正确的思路应该是：先规划好网格骨架，再为每个子项显式指定占据范围。这才是Grid的真正优势所在。

具体怎么做？我们先来拆解一下。从目标视觉结构反推回去，网格的轨道定义是这样的：

列轨道：40% 23% 4% 23% → 总共4列，中间留一条4%的窄缝作为视觉分隔，左右两侧主区域比例非常协调。
行轨道：300px 50px 200px → 3行，分别对应高主区、窄过渡带以及底部区块。
然后，每个 .hero-box 通过 grid-row 和 grid-column 属性，精准锚定起止线。想跨几行跨几列，完全是“指哪打哪”。

下面是一份完整、可直接运行的代码示例（Vue 单文件组件风格，但 CSS 部分完全通用，直接拿走就能用）：

⚠️ 关键注意事项

• grid-row: 1 / 3 的含义，很多人理解错了。它的意思是：从第1条网格线开始，到第3条网格线结束→ 实际跨越2行轨道（行1和行2）。是从“线”到“线”，而不是从“第1行到第3行”，这个区别必须搞清楚。
• 生产环境里，百分比列宽其实不太灵活。建议改用 fr 单位（比如 1fr 0.6fr 0.1fr 0.6fr），或者配合 minmax() 加 auto-fit，这样弹性更好，响应式表现也更专业。
• 注意 scoped 样式可能带来的干扰。如果 .hero-box 样式需要被外部覆盖（比如做主题切换），可以考虑去掉 scoped，或者改用 :deep()。
• 无障碍体验也不能忽略。给每个 .hero-box 加上 role="region" 和 aria-label，比如

  1

  。对屏幕阅读器用户友好，也是专业工程实践的标准。

掌握这种“轨道定义 + 显式定位”的思维模式，你会发现，无论是新闻门户首页、数据看板，还是创意画廊，任意复杂的网格结构都能轻松驾驭。Grid 不是魔法，它是对空间的精准编程——从今天开始，彻底告别 float 和 inline-block 的苦役时代吧。