本文详解如何使用 css grid 精确控制六个区块的不规则排布，通过 grid-column 和 grid-row 属性实现跨行跨列布局，替代僵化的等分网格，适配如教育机构首页的视觉焦点设计。
本文详解如何使用 css grid 精确控制六个区块的不规则排布，通过 grid-column 和 grid-row 属性实现跨行跨列布局，替代僵化的等分网格，适配如教育机构首页的视觉焦点设计。
要实现类似参考图中错落有致的六宫格布局（非均匀分布、部分区块纵向拉伸、部分横向占位），关键在于放弃“均分三列两行”的简单思维，转而采用精细化轨道定义 + 显式区域定位的 Grid 策略。
一、合理规划网格轨道
首先分析目标布局结构：
- 左上大区块（Box 1）需占据左半侧高度（约两行）；
- 中上区块（Box 2）横跨中间两列；
- 右上小块（Box 3）居右上角；
- 左下（Box 4）、中下（Box 5）、右下（Box 6）呈阶梯式错位，其中 Box 6 需向下延伸覆盖底部区域。
据此定义四列三行的灵活轨道：
.hero-box-container {
display: grid;
/* 四列：左侧宽区 + 中左 + 极窄间隔 + 中右 */
grid-template-columns: 40% 23% 4% 23%;
/* 三行：主视觉高区 + 中间过渡窄条 + 底部功能区 */
grid-template-rows: 300px 50px 200px;
gap: 8px; /* 增加可读性间隙，避免粘连 */
}
✅ 提示：百分比单位便于响应式缩放；gap 替代手动 margin，更符合 Grid 语义。
二、为每个区块指定精确位置与跨度
利用 grid-row 和 grid-column 的起止线语法（start / end），明确各元素占据的轨道范围：
.hero-box-1 { /* 左上大块 */
background-color: #70e9c9;
grid-row: 1 / 3; /* 跨第1～2行（即占前两行高度）*/
grid-column: 1 / 2; /* 占第1列（默认宽度40%）*/
}
.hero-box-2 { /* 中上横条 */
background-color: #63dbbb;
grid-row: 1; /* 仅第1行 */
grid-column: 2 / 4; /* 跨第2～3列（含4%间隔列）→ 实际占中左+间隔 */
}
.hero-box-3 { /* 右上小块 */
background-color: #51c9a9;
grid-row: 1;
grid-column: 4; /* 第4列（23%宽）*/
}
.hero-box-4 { /* 左下 */
background-color: #3dafa0;
grid-row: 3; /* 第3行 */
grid-column: 1; /* 第1列 */
}
.hero-box-5 { /* 中下竖条 */
background-color: #309d96;
grid-row: 2 / 4; /* 跨第2～3行（含过渡窄条+底部区）*/
grid-column: 2; /* 第2列 */
}
.hero-box-6 { /* 右下大块，向右下延伸 */
background-color: #1e897a;
grid-row: 2 / 5; /* 注意：超出显式定义的3行 → Grid 自动扩展隐式行 */
grid-column: 3 / 5; /* 跨第3～4列（含间隔+右列）*/
}
⚠️ 注意事项：
- grid-row: 2 / 5 中的 5 超出原始 grid-template-rows 定义的3行，CSS Grid 会自动创建隐式网格行并分配高度（默认 auto），确保内容完整显示；
- 若需严格控制隐式行高度，可添加 grid-auto-rows: 200px；
- 所有 .hero-box 类应统一设置 display: flex; align-items: center; justify-content: center; 以居中数字内容，提升视觉一致性。
三、完整 HTML 结构与最佳实践
保持语义化结构不变，仅增强样式鲁棒性：
<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>
✅ 总结：
真正掌握 Grid 的核心，在于理解「轨道（track）」与「区域（area）」的分离——先画好网格骨架（grid-template-*），再把元素像拼图一样精准嵌入（grid-row/column）。这种模式比 Flexbox 更适合二维复杂布局，且代码可维护性强。初学者建议配合浏览器开发者工具的「Grid Overlay」功能实时调试，直观验证行列线与跨度逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
