使用fr单位、minmax()函数和auto关键字可实现CSS Grid布局中行列的自适应。1. fr按比例分配剩余空间，如1fr 2fr将容器分为三份；2. minmax(min, max)设定轨道尺寸范围，如minmax(0, 1fr)允许收缩至0并最大占1份；3. auto使行列尺寸由内容决定，常用于头部、尾部或侧边栏；4. grid-auto-rows统一设置隐式行高，如minmax(60px, auto)确保最小高度且内容多时自动扩展。组合这些方法可构建灵活响应式布局。
在使用 CSS Grid 布局时，让行和列自动适应内容高度与宽度是常见需求。关键在于合理使用 fr 单位、min-content、max-content、auto 和 minmax() 函数。下面介绍几种实用技巧，帮助你实现自动行列高度自适应。
1. 使用 fr 单位实现弹性列/行分配
fr（fraction）单位表示网格容器中可用空间的份数。它能根据剩余空间自动分配列或行的尺寸。
示例：
grid-template-columns: 1fr 2fr; 表示第一列占1份，第二列占2份，总和为3份，按比例分配容器宽度。
同样适用于行：grid-template-rows: 1fr auto; 第一行占剩余空间，第二行由内容决定高度。
2. 利用 minmax() 实现最小/最大范围控制
minmax(min, max) 可定义网格轨道的最小和最大尺寸，非常适合响应式设计。
常用组合：- minmax(0, 1fr)：允许列收缩到0，但最多占据1份空间。
- minmax(auto, 1fr)：最小为内容所需大小，最大可伸展至1fr。
- minmax(min-content, 1fr)：最小为内容最小宽度（如不换行文本），最大可扩展。
适合用于防止内容溢出同时保持弹性布局。
立即学习“前端免费学习笔记（深入）”；
3. auto 关键字实现内容自适应
将行或列设为 auto，其尺寸将完全由内容决定。
场景举例：- grid-template-rows: auto 1fr auto; 头部和 footer 高度随内容变化，中间区域撑满剩余空间。
- grid-template-columns: auto 1fr; 左侧菜单根据内容宽度自适应，右侧主体占满剩余宽度。
4. 配合 grid-auto-rows 实现动态行高
当网格项数量不确定时，使用 grid-auto-rows 统一设置自动生成行的高度。
推荐写法：- grid-auto-rows: minmax(60px, auto); 每行至少60px，内容多时自动增高。
- grid-auto-rows: max-content; 行高完全由内容最大高度决定（可能造成不一致）。
基本上就这些核心技巧。通过灵活组合 fr、auto、minmax 和 grid-auto-rows，可以轻松实现内容驱动的自适应网格布局，无需固定像素值也能保持结构清晰和响应性。
