grid-auto-rows用于控制隐式网格行的高度，解决内容超出预设行数时的布局问题；可设为auto、1fr、固定值或repeat语法，并需配合grid-auto-flow使用。
当 Grid 布局中内容行数超出预设的 grid-template-rows，多余项目会挤在最后一行或溢出——这不是 bug，而是默认行为。解决办法是用 grid-auto-rows 让新增行“自动诞生”，按需分配高度。
显式网格（通过 grid-template-rows 定义）只管你写出来的那些行；超出部分属于“隐式网格行”，由 grid-auto-rows 决定它们长什么样。
auto：行高由内容撑开（最常用）1fr：新行参与剩余空间分配（注意：仅在容器有明确高度时才生效）80px：每新增一行都严格等高grid-auto-rows: repeat(3, 60px) 100px;
默认 grid-auto-flow: row，新增项从上到下逐行填；如果改成 column，就变成从左到右逐列填——此时 grid-auto-rows 不再起作用，得换用 grid-auto-columns。
常见误操作：只设了 grid-auto-rows 却把 grid-auto-flow 改成 column，结果新增项不生成新行也不报错，只是“消失”在视觉之外。
即使写了 grid-auto-rows: auto，有时新行看起来还是“没高度”，原因通常是：
min-height），导致 auto 算出来是 0display: grid 或遗漏 grid-template-columns（列没定义，整个网格可能无法正常触发隐式行生成）建议加一句 min-height: 1px 到子项，或给 grid-auto-rows 换成 minmax(min-content, auto) 更稳妥。
基本上就这些。grid-auto-rows 不是万能扩容开关，但它让 Grid 真正具备了“内容驱动布局”的弹性。用对了，增删列表项、动态卡片流都不用改 CSS。
以上就是Grid网格布局行数不够自动扩展怎么办_使用grid-auto-rows让行数自动添加的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
898
收藏
取消收藏
