本文详解如何使用 CSS Grid 精确控制六块区域的行列跨度，通过 grid-row 和 grid-column 属性实现非均匀、错落有致的现代网格布局，替代传统等分方案。
本文详解如何使用 css grid 精确控制六块区域的行列跨度，通过 `grid-row` 和 `grid-column` 属性实现非均匀、错落有致的现代网格布局，替代传统等分方案。
要构建如图所示的六宫格视觉结构（左上大块、中上横跨双列、右上小块、左下竖跨两行、中下竖跨三行、右下斜跨多格），关键在于放弃“均分列宽”的思维，转而定义精细化的网格轨道，并让子元素主动声明占据范围。
✅ 正确的 Grid 布局策略
首先，明确容器需划分出 4 列 × 3 行 的基础轨道（含隐式间隙），再通过 grid-row / grid-column 指定每个区块的起止线：
.hero-box-container {
display: grid;
/* 四列：主视觉区宽40%，两侧辅助区各23%，中间窄缝4% */
grid-template-columns: 40% 23% 4% 23%;
/* 三行：顶部高300px，中部窄条50px，底部主区域200px */
grid-template-rows: 300px 50px 200px;
gap: 8px; /* 可选：添加统一间距，提升可维护性 */
}接着，为每个 .hero-box 显式指定其网格位置与跨度：
.hero-box-1 {
background-color: #70e9c9;
grid-row: 1 / 3; /* 占据第1～第3行线（即跨前两行）*/
}
.hero-box-2 {
background-color: #63dbbb;
grid-column: 2 / 4; /* 占据第2～第4列线（即跨第2、第3列）*/
}
.hero-box-3 {
background-color: #51c9a9;
/* 默认占据单格：grid-row: 1 / 2; grid-column: 3 / 4; */
}
.hero-box-4 {
background-color: #3dafa0;
grid-row: 3; /* 等价于 grid-row: 3 / 4 */
}
.hero-box-5 {
background-color: #309d96;
grid-row: 2 / 4; /* 跨第2、第3行（含中部窄条和底部区域）*/
}
.hero-box-6 {
background-color: #1e897a;
grid-row: 2 / 5; /* ⚠️ 注意：此处需确保总行数 ≥ 5，否则无效；实际应设为 2 / 4 并调整 grid-template-rows */
grid-column: 3 / 5; /* 跨第3、第4列 */
}? 重要修正说明：原答案中 grid-row: 2 / 5 在仅定义了 3 行轨道时会导致失效。实践中建议统一使用 grid-row: 2 / 4（覆盖第2、第3行），并确保 grid-template-rows 总高度匹配视觉需求。若需更复杂结构，可改用 fr 单位提升弹性，例如：
立即学习“前端免费学习笔记（深入）”；
grid-template-rows: 3fr 0.5fr 2fr;
? 最佳实践建议
- 避免百分比 + 固定像素混用：推荐统一使用 fr 单位（如 1fr 0.3fr 1.5fr）或 minmax() 配合 auto-fit，增强响应式适应力；
- 语义化类名优于序号命名：将 .hero-box-1 改为 .hero-main, .hero-featured 等，提升代码可读性与可维护性；
- 添加 aspect-ratio 或 min-height：防止内容为空时区块塌陷；
-
配合 @media 设置断点：在移动端切换为单列流式布局，例如：
@media (max-width: 768px) { .hero-box-container { grid-template-columns: 1fr; grid-template-rows: auto; } }
掌握 grid-row/grid-column 的显式定位能力，是进阶 CSS Grid 的核心技能——它让你从“被动排列”走向“主动构图”，真正释放网格系统的表达潜力。
