grid-template-rows和grid-template-columns是定义显式网格的必需属性，必须写在容器上，值为轨道尺寸序列；fr单位按剩余空间分配，非百分比；repeat()配合auto-fit和minmax()可实现响应式列布局；隐式网格需用grid-auto-rows等控制溢出项高度。

grid-template-rows 和 grid-template-columns 是定义显式网格的唯一直接方式

它们不是“可选配置”，而是你画出网格骨架的必需笔触。只要没写这两个属性，display: grid 只创建了一个空容器——没有行、没有列、没有轨道，后续的 grid-column 或 grid-row 会默认落到隐式网格里，行为难以预测。

• 二者必须写在**容器元素**上，子项无法通过自身样式定义行列结构
• 值是一组用空格分隔的轨道尺寸（track size），顺序即从左到右（列）、从上到下（行）
• 不支持简写合并成一个属性；grid-template 虽能整合，但语法更复杂且可读性差，不推荐新手用
• 若只定义了 grid-template-columns 而没写 grid-template-rows，所有子项将堆叠在第一行——这不是 bug，是规范行为

fr 单位不是“百分比”，它是剩余空间的弹性切片

很多人误以为 1fr ≈ 33.33%，其实它只在所有轨道都用 fr 时才等效。一旦混入 px、% 或 auto，计算逻辑立刻变化。

• grid-template-columns: 200px 1fr 2fr：先扣掉 200px 固定宽度，剩下空间按 1:2 切成两份，不是按总宽三等分
• grid-template-columns: 1fr 1fr auto：前两列平分“减去 auto 列内容宽度后的剩余空间”，auto 列由自身内容撑开，可能挤压其他列
• 避免在同一个轨道列表里混用 % 和 fr——% 相对于容器宽，fr 相对于剩余空间，两者基准不同，结果难推演

repeat() 不只是缩写，它是响应式布局的关键杠杆

repeat(4, 1fr) 看似只是 1fr 1fr 1fr 1fr 的简写，但它真正价值在于配合 auto-fit 和 minmax() 实现自动列数调整。

• grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))：每列至少 250px，容器够宽就多放一列，不够就自动换行——无需媒体查询
• repeat(3, 100px) 和 100px 100px 100px 渲染完全

  

  一致，但前者更易维护，尤其当列数达 6+ 时
• 别对 grid-template-rows 盲目套用 repeat(auto-fit...)：行高通常依赖内容，auto-fit 在行方向效果有限，更适合列布局

显式网格之外还有隐式网格，漏设 grid-auto-rows 会导致高度失控

当你有 10 个子项，但只定义了 grid-template-rows: 60px 80px（仅两行），浏览器会自动生成第 3、4… 行来容纳剩余项目——这些就是隐式行，其高度默认为 auto，也就是由内容撑开。

• 后果：卡片高度不一致、底部留白突兀、滚动体验割裂
• 修复：加一句 grid-auto-rows: minmax(120px, auto)，保证所有隐式行最小 120px，内容多时仍可伸展
• 注意：grid-auto-rows 不影响显式定义的行，只管“多出来的那些行”
• 同理，grid-auto-columns 用于控制超出显式列数时的列宽，但实际中列溢出较少见

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));
  grid-template-rows: 72px; /* 头部固定高 */
  grid-auto-rows: minmax(140px, auto); /* 其余行统一基线 */
  gap: 16px;
}

显式网格定义的是你“计划中的结构”，而隐式网格处理的是“现实中的意外”。跳过 grid-auto-rows 就像只设计楼层不考虑承重，表面能用，一加内容就露馅。

# css  # 浏览器  # ai  # 响应式布局  # 一加  # grid布局  # auto  # 堆  # 切片  # display  # column  # bug  # 隐式  # 的是  # 它是  # 相对于  # 写在  # 切成  # 也就  # 一句  # 是由  # 很多人 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何生成腾讯云建站专用兑换码？  Laravel如何使用Livewire构建动态组件？（入门代码）  如何在橙子建站上传落地页？操作指南详解  JavaScript中的标签模板是什么_它如何扩展字符串功能  Laravel Seeder填充数据教程_Laravel模型工厂Factory使用  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  合肥制作网站的公司有哪些,合肥聚美网络科技有限公司介绍？  深圳网站制作平台,深圳市做网站好的公司有哪些？  为什么要用作用域操作符_php中访问类常量与静态属性的优势【解答】  如何在云主机上快速搭建网站？  Windows10如何更改计算机工作组_Win10系统属性修改Workgroup  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  如何快速启动建站代理加盟业务？  Laravel怎么写单元测试_PHPUnit在Laravel项目中的基础测试入门  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  如何在Windows 2008云服务器安全搭建网站？  如何彻底卸载建站之星软件？  Claude怎样写结构化提示词_Claude结构化提示词写法【教程】  免费视频制作网站,更新又快又好的免费电影网站？  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  制作公司内部网站有哪些,内网如何建网站？  如何破解联通资金短缺导致的基站建设难题？  动图在线制作网站有哪些,滑动动图图集怎么做？  html如何与html链接_实现多个HTML页面互相链接【互相】  微信小程序 canvas开发实例及注意事项  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  Python图片处理进阶教程_Pillow滤镜与图像增强  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  北京网站制作的公司有哪些,北京白云观官方网站？  Laravel如何实现模型的全局作用域？（Global Scope示例）  Thinkphp 中 distinct 的用法解析  如何在云服务器上快速搭建个人网站？  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  潮流网站制作头像软件下载,适合母子的网名有哪些？  Laravel Seeder怎么填充数据_Laravel数据库填充器的使用方法与技巧  如何在不使用负向后查找的情况下匹配特定条件前的换行符  如何正确选择百度移动适配建站域名？  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？  如何撰写建站申请书？关键要点有哪些？  Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】  简历在线制作网站免费版,如何创建个人简历？  JavaScript如何实现倒计时_时间函数如何精确控制  Laravel如何与Docker（Sail）协同开发？（环境搭建教程）  网站制作公司哪里好做,成都网站制作公司哪家做得比较好，更正规？  香港服务器如何优化才能显著提升网站加载速度？  Laravel如何实现登录错误次数限制_Laravel自带LoginThrottles限流配置【方法】  Laravel如何处理异常和错误？（Handler示例）  Laravel如何与Inertia.js和Vue/React构建现代单页应用