Grid布局三行划分方法解析

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《Grid网格布局三行划分技巧》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

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。

弹性三行布局：使用 fr 单位分配剩余空间

更常用，尤其适配不同屏幕。例如“头部固定、主体自适应、底部固定”：

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: 70px 1fr 90px;
• @media (max-width: 768px) {
    grid-template-rows: auto 1fr auto;
  }

这样在移动端让头尾根据内容自适应，中间仍保持弹性占位。

基本上就这些。关键是理解 grid-template-rows 定义的是“行轨道”而非元素本身，只要子元素顺序正确，Grid 会自动按序分配。不复杂但容易忽略单位语义——px 是刚性，fr 是弹性，auto 是内容驱动，混用才能灵活控高。

好了，本文到此结束，带大家了解了《Grid布局三行划分方法解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！