grid-template-rows使用auto时行高由内容决定，适合动态内容；使用固定值（如50px）则布局规整，适合对齐要求高的场景。可混合使用，如60px auto 40px，兼顾灵活性与结构统一。
在 CSS Grid 布局中，grid-template-rows: auto 和使用固定行高（如 50px、2em 等）是两种定义行高的方式，它们的行为和适用场景有所不同。
grid-template-rows: auto 的含义
auto 表示行的高度由内容自动决定。Grid 会根据该行中内容的大小来调整高度，类似于块级元素自然撑开父容器的方式。
特点：
- 内容少时行变矮，内容多时行变高
- 适合内容不固定或需要自适应的布局
- 可能造成行高不一致，影响整体对齐美观
使用固定行高（如 50px、2em）
将行高设置为具体数值，比如 grid-template-rows: 50px 100px;，每行高度被强制设定。
立即学习“前端免费学习笔记（深入）”；
优点：
- 布局更规整，视觉上更统一
- 适合表格类、卡片列表等需要对齐的场景
- 可预测性强，便于设计响应式结构
注意：
- 若内容超出固定高度，可能导致溢出（需配合
overflow处理） - 在不同屏幕或字体缩放下可能显示不全
如何选择？
根据实际需求决定：
- 内容动态变化、文字长度不确定 → 推荐 auto
- 需要整齐划一的网格（如图库、仪表盘）→ 推荐固定值
- 也可混合使用，例如：
grid-template-rows: 60px auto 40px;，首行固定，中间自适应，底部固定
基本上就这些。关键是理解内容与布局之间的关系，灵活搭配才能实现既美观又实用的 Grid 布局。
