怎样用 CSS Grid 精准实现六宫格不规则布局（含跨行跨列详解）

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

本文手把手教你使用 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 部分完全通用）：

<template>  <div class="container">    <div class="row">      <div class="col text-center">        <h3>Best Of The Best</h3>        <p>Sebuah lembaga pendidikan yang didedikasikan untuk memaksimalkan potensi anak bangsa.</p>      </div>    </div>    <div class="hero-box-container">      <div class="hero-box hero-box-1">1</div>      <div class="hero-box hero-box-2">2</div>      <div class="hero-box hero-box-3">3</div>      <div class="hero-box hero-box-4">4</div>      <div class="hero-box hero-box-5">5</div>      <div class="hero-box hero-box-6">6</div>    </div>  </div></template><style scoped>.hero-box-container {  display: grid;  grid-template-columns: 40% 23% 4% 23%;  grid-template-rows: 300px 50px 200px;  gap: 8px; /* 推荐添加间隙提升可读性 */}.hero-box {  border-radius: 8px;  color: white;  font-weight: bold;  display: flex;  align-items: center;  justify-content: center;}.hero-box-1 { background-color: #70e9c9; grid-row: 1 / 3; }     /* 跨第1–2行（共2行） */.hero-box-2 { background-color: #63dbbb; grid-column: 2 / 4; }   /* 跨第2–3列（即中间两列） */.hero-box-3 { background-color: #51c9a9; }                      /* 默认占1×1单元格 */.hero-box-4 { background-color: #3dafa0; grid-row: 3; }          /* 占第3行整行 */.hero-box-5 { background-color: #309d96; grid-row: 2 / 4; }      /* 跨第2–3行（覆盖窄带+底部） */.hero-box-6 { background-color: #1e897a; grid-row: 2 / 5; grid-column: 3 / 5; } /* 跨2–3行 + 第3–4列 */</style>

⚠️ 关键注意事项

• 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，例如 <div class="hero-box-1" aria-label="Utama: Prestasi Lembaga">1</div>。

掌握这种“轨道定义 + 显式定位”的思维模式，你将能自由构建新闻门户首页、数据看板、创意画廊等任意复杂网格结构。Grid 不是魔法，而是对空间的精准编程——从今天开始，告别 float 和 inline-block 的苦役时代。

立即学习“前端免费学习笔记（深入）”；