本文详解如何使用 CSS Grid 精准构建如图所示的六元素错落式响应布局，通过 grid-column 和 grid-row 显式控制每个区块的行列跨度，替代低效的等分网格方案。
本文详解如何使用 css grid 精准构建如图所示的六元素错落式响应布局，通过 `grid-column` 和 `grid-row` 显式控制每个区块的行列跨度，替代低效的等分网格方案。
要实现类似参考图中非对称、错落有致的六宫格布局（左上大块、右上双联、中下阶梯式排列），关键在于放弃均分思维，转而定义精细化的网格轨道，并让子项主动跨越多行或多列。CSS Grid 的 grid-column 与 grid-row 属性正是为此而生——它们允许单个元素灵活占据多个网格单元，从而精准还原设计稿。
以下是一个经过验证的完整实现方案：
<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>.hero-box-container {
display: grid;
/* 定义4列：主视觉宽列 + 中间窄缝 + 右侧双列 */
grid-template-columns: 40% 23% 4% 23%;
/* 定义3行：顶部高区 + 中间窄条 + 底部中高区 */
grid-template-rows: 300px 50px 200px;
gap: 0; /* 避免默认间隙干扰布局 */
}
/* 区块1：跨第1–2行，占据首列 */
.hero-box-1 {
background-color: #70e9c9;
grid-row: 1 / 3; /* 起始行线1 → 结束行线3（即跨2行） */
}
/* 区块2：跨第2–3列，居于顶部右侧 */
.hero-box-2 {
background-color: #63dbbb;
grid-column: 2 / 4; /* 起始列线2 → 结束列线4（即跨2列） */
}
/* 区块3：默认位置（第1行第3列），无需额外声明 */
.hero-box-3 {
background-color: #51c9a9;
}
/* 区块4：固定在第3行第1列 */
.hero-box-4 {
background-color: #3dafa0;
grid-row: 3; /* 等价于 grid-row: 3 / 4 */
}
/* 区块5：跨第2–3行，第1列 */
.hero-box-5 {
background-color: #309d96;
grid-row: 2 / 4; /* 跨越中间窄行与底部行 */
}
/* 区块6：跨第2–4行 & 第3–4列，形成右下角锚定效果 */
.hero-box-6 {
background-color: #1e897a;
grid-row: 2 / 5; /* 注意：因仅定义3行，行线编号为1/2/3/4，故/5=自动延伸至末尾 */
grid-column: 3 / 5;
}✅ 关键技巧说明：
- grid-row: a / b 表示从第 a 条行线开始，到第 b 条行线结束（不包含第 b 行线本身），因此跨 n 行需写 start / (start + n)；
- 列线编号同理，grid-column: 2 / 4 即跨越第2→3→4列线之间的两个列轨道；
- 使用百分比定义 grid-template-columns/rows 可兼顾灵活性与视觉比例，但若需更强响应性，推荐改用 fr 单位（如 1fr 0.6fr 0.1fr 0.6fr）并配合 minmax()；
- gap: 0 显式清空默认间隙，避免意外留白破坏紧凑构图；
- 所有区块无需设置宽高——Grid 布局会自动按轨道分配空间，真正实现“内容驱动尺寸”。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免混用 Flexbox 与 Grid 处理同一层级布局逻辑，本例中 .hero-box-container 是 Grid 容器，其子项应统一由 Grid 控制，勿再对 .hero-box 设置 display: flex；
- 若项目需兼容旧版浏览器（如 IE11），需提供 -ms-grid 回退方案，但现代 Vue/React 项目通常可忽略；
- 实际开发中建议为 .hero-box 添加通用基础样式（如 display: flex; align-items: center; justify-content: center; font-weight: bold; color: white;），提升可维护性。
掌握这种基于轨道定义 + 跨轨定位的 Grid 思维，你将能高效复现任意复杂网格布局，远超传统浮动或 Flexbox 的表达边界。
