grid-template-rows实现三行布局需明确高度单位：px用于固定高度（如60px 400px 80px），fr分配剩余空间（如60px 1fr 80px），minmax()兼顾弹性与最小高度（如minmax(200px,1fr)），auto适配内容，再结合媒体查询实现响应式。
用 grid-template-rows 实现三行布局，核心是明确指定三行的高度比例或具体值，让容器子元素自动按顺序填入对应行轨道。
适合头部、主体、底部高度确定的场景，比如顶部导航栏 60px、内容区 400px、底部 80px：
示例代码：container {
display: grid;
grid-template-rows: 60px 400px 80px;
}
此时三个直接子元素会依次占据这三行，无需额外设置 grid-row。
更常用，尤其适配不同屏幕。例如“头部固定、主体自适应、底部固定”：
grid-template-rows: 60px 1fr 80px;
其中 1fr 表示占用所有剩余可用高度，不受内容撑开影响，也不会溢出。
如果希望主体占两份、其他各一份，可写：60px 2fr 80px。
当某一行内容高度不确定（如文章标题+简介），又想避免留白或溢出，可用 minmax()：
grid-template-rows: 60px minmax(200px, 1fr) 80px;
含义：中间行至少高 200px，有空间时可伸展至占满剩余高度。
也可用 auto 让某行“刚好包裹内容”，但需注意：若内容过多可能撑大整页，建议配合 overflow: auto 或限制最大高度。
小屏下可把三行改为单列堆叠，或合并部分区域：
这样在移动端让头尾根据内容自适应，中间仍保持弹性占位。
基本上就这些。关键是理解 grid-template-rows 定义的是“行轨道”而非元素本身，只要子元素顺序正确，Grid 会自动按序分配。不复杂但容易忽略单位语义——px 是刚性，fr 是弹性，auto 是内容驱动，混用才能灵活控高。
以上就是Grid网格布局如何实现三行布局_使用grid-template-rows精确划分行高的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
819
收藏
