使用 auto 或 minmax() 设置 grid-template-rows 可使网格行随内容撑开，避免固定高度或 fr 导致的溢出问题，推荐 .container { grid-template-rows: auto; } 或 minmax(最小值, auto) 以实现自适应。
在使用 CSS Grid 布局时，如果网格行的高度没有随着内容撑开，通常是因为行高被固定或未正确设置最小高度。解决这个问题的关键是避免使用固定值（如 px）定义行高，而应使用 auto 或 minmax() 来确保行可以随内容自适应。
使用 auto 让行高随内容自动调整
将网格行的 grid-template-rows 设置为 auto，可以让每一行根据内容高度自动伸缩。
.container {
display: grid;
grid-template-rows: auto auto auto; /* 每行高度由内容决定 */
gap: 10px;
}
这样，当某一行中的内容变多时，该行会自然撑开，不会出现内容溢出或高度卡死的情况。
使用 minmax() 定义最小行高，同时允许扩展
如果你希望行有一个最小高度，但又能随内容变多而增高，推荐使用 minmax(min, max) 函数。
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-rows: minmax(50px, auto) minmax(60px, auto);
}
上面的例子中，每行至少有 50px 或 60px 高，但当内容超过这个高度时，会自动扩展以容纳内容。
避免使用固定高度和 fr 单元的误区
以下写法会导致行高无法随内容撑开：
-
grid-template-rows: 100px 100px—— 固定高度，内容超出会被截断或溢出。 -
grid-template-rows: 1fr 1fr—— fr 单元分配剩余空间，但不会响应内容高度变化。
除非你明确需要等高列且内容不会动态变化，否则不建议在需要内容自适应的场景中使用这些方式。
配合 align-content 和 overflow 处理特殊情况
如果容器设置了固定高度，仍希望内容撑开行，可结合：
-
align-content: start—— 防止行在容器中拉伸，让内容自然堆叠。 -
overflow-y: auto—— 允许容器滚动，避免内容溢出不可见。
基本上就这些。关键是用 auto 或 minmax(最小高度, auto) 替代固定值，让 CSS Grid 的行真正“跟随内容”。
