使用 CSS Grid 实现三行布局的核心要点
明确网格容器与行高单位
在 CSS Grid 中，三行布局的第一步是定义网格容器以及每一行的高度。通过 grid-template-rows 指定具体的高度分布，可以实现对三行的精确控制。将行高设定为固定值、可伸缩值以及混合值，是确保稳定布局的关键。
为保持可预测性，建议把第一行定为固定像素（如 60px），中间行使用自适应单位，最后一行使用余剩空间的比例。这样在不同内容量下仍能保持整齐的三行结构。核心做法是把固定行与弹性行结合起来。
.grid {display: grid;grid-template-rows: 60px 1fr 2fr;
}
在实现时，逐行设定单位可以避免子元素的溢出，并且便于后续用媒体查询进行微调。
精确控制三行的高低与最小/最大高度
如果需要对高度进行边界控制，minmax() 是一个强大工具。它允许给定一个最小值与一个可扩展的最大值，从而在内容不足或过撑时保持稳定。示例中的三行可以设为 60px、minmax(100px, 1fr) 与 minmax(150px, 2fr) 来确保在不同视口下的可读性。
另一种常用组合是使用 1fr 与 minmax() 结合，使中间行在空间充足时占据更多比重，在空间不足时保持最小可读高度。
.grid {display: grid;grid-template-rows: 60px minmax(100px, 1fr) minmax(150px, 2fr);
}
此外，请关注在不同设备上的滚动行为与内容溢出之间的关系。通过混合固定与自适应高度，可以实现在多场景下的稳定表现。
实战场景与案例
导航-内容-底部布局
一个典型的三行布局常见于导航栏、主体内容区域和页脚的结构。通过 grid-template-rows 可以把这三区分明地分布在三行中。导航高度通常固定，内容区自适应，底部区作为固定或自适应的收尾。
示例中，导航 60px、内容区域 1fr、底部 40px 的组合可以快速搭建一个整洁的页面骨架。
.layout {display: grid;height: 100vh;grid-template-rows: 60px 1fr 40px;
}
使用 height: 100vh 与 grid-template-rows 的组合，可以确保三行布局在视口高度变化时保持稳定的比例。
响应式设计与媒体查询
在响应式设计中，同一份网格模板可能在不同断点表现不同。通过在 @media 块中调整 grid-template-rows，可以实现不同设备上的两种或多种三行布局。
通过把第二行为的比例在不同断点下调整，既能保持可读性，也能避免滚动条的出现。
@media (min-width: 768px) {.layout {grid-template-rows: 72px 1.2fr 48px;}
}
@media (min-width: 1024px) {.layout {grid-template-rows: 80px 1fr 60px;}
}
媒体查询是实现三行布局在多设备上统一外观的关键工具。
调试与优化技巧
调试行高冲突与盒模型
在复杂的网格中，行高冲突常常出现在内容块的 padding、border 与 margin 的叠加上。理解盒模型对精准划分行高至关重要，避免对网格行高造成不可预期的挤压。
将网格容器的 overflow、gap 与子项的外边距分离调试，有助于快速定位问题。
.grid {display: grid;grid-template-rows: 60px 1fr 40px;gap: 8px;
}
.item { padding: 12px; border: 1px solid #ddd; }
使用 gap 可以让行之间有明确间距，避免高度计算混乱。
开发者工具中的网格线可视化
浏览器开发者工具提供网格线可视化功能，可以直观确认 grid-template-rows 的实际效果。通过观察主轴方向的分布和线的位置，可以快速调整数值。
在调试阶段，建议先固定一个三行的基础模板，再逐步引入自适应和 minmax，以减少复杂性。
/* 网格线可视化通常在开发者工具中看到，需在代码中保持简单的模板以便分析 */
