如何用 CSS Grid 精准实现六宫格不规则布局（含跨行跨列详解）-html教程-PHP中文网

如何用 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 部分完全通用）：

CSS婚礼策划服务机构宣传网站模板

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，例如
1
。