1. 场景与问题定义
理解网格行高的实际含义
在多列网格布局中，单元的高度往往受内容多少影响，但若想保持整齐的行高，就需要通过轨道尺寸来控制。网格轨道高度决定了每一行的可用垂直空间，直接影响视觉对齐。
如果网格的行高只是简单设为内容高度 (auto)，当内容增多时，某些单元可能拉高行距，导致整体错位。此处需要引入 minmax() 或类似机制来设定一个最小值。
本篇的核心目标是回答“CSS网格行高不随内容撑开怎么办？用auto或minmax定义最小行高的实战技巧”，并给出可直接落地的 CSS 代码与示例。
/* 场景示例：3 行网格，确保每行至少 48px 高度，内容若大于高度则自动增高 */
.grid {display: grid;grid-auto-rows: minmax(48px, auto);gap: 12px;
}
2. 使用 auto 定义最小行高的实战技巧
auto 的基本影响与边界
通过设置 grid-auto-rows: minmax(48px, auto)，可以让每一行具备一个最小高度，同时允许内容增加时，行高随内容继续增长，这样既保证了最小视觉效果，又不削弱自适应性。
在实际应用中，auto 作为最大尺度对齐的基线，若不结合最小值，那么极端内容也可能导致行高不一致，因此建议将 minmax 与之搭配使用。
下面给出一个简短的示例：在一个三行网格中，设置每行的最小值为 64px，最大值用 auto 表示随内容增长。
/* auto 技巧示例：最小高度 + 内容增长 */
.grid { display: grid; grid-auto-rows: minmax(64px, auto); gap: 10px;
}
3. 通过 minmax 定义最小行高的进阶技巧
响应式方案中的 minmax 用法
使用 minmax() 可以明确声明最低行高，同时让轨道在内容增长时有上限或根据可用空间扩展。在响应式布局中，这种写法尤为有用，因为不同屏幕下的文本溢出情况不同。
另外一个常见用法是结合 grid-auto-rows 和媒体查询，让在大屏下行高更高，小屏下适当降低，从而维持整齐的网格对齐。
为了直观地理解，我们可以在一个容器中使用 minmax(40px, auto) 来实现最低高度保护，同时允许文本行若超出则扩高。
/* minmax 进阶：最小高度与内容增长的平衡 */
.grid { display: grid; grid-auto-rows: minmax(40px, auto); gap: 14px;
}
