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 】 【 网络技术251811 】 【 AI营销90571 】

相关推荐： 历史网站制作软件,华为如何找回被删除的网站？  Laravel怎么生成URL_Laravel路由命名与URL生成函数详解  Laravel如何与Docker（Sail）协同开发？（环境搭建教程）  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  用v-html解决Vue.js渲染中html标签不被解析的问题  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  *服务器网站为何频现安全漏洞？  动图在线制作网站有哪些,滑动动图图集怎么做？  Laravel怎么连接多个数据库_Laravel多数据库连接配置  如何打造高效商业网站？建站目的决定转化率  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  重庆市网站制作公司,重庆招聘网站哪个好？  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  文字头像制作网站推荐软件,醒图能自动配文字吗？  Android中AutoCompleteTextView自动提示  ,网页ppt怎么弄成自己的ppt？  如何用花生壳三步快速搭建专属网站？  如何实现建站之星域名转发设置？  php在windows下怎么调试_phpwindows环境调试操作说明【操作】  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  桂林网站制作公司有哪些,桂林马拉松怎么报名？  如何在沈阳梯子盘古建站优化SEO排名与功能模块？  Laravel如何使用模型观察者？（Observer代码示例）  HTML5空格和nbsp有啥关系_nbsp的作用及使用场景【说明】  Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧  nodejs redis 发布订阅机制封装实现方法及实例代码  ,交易猫的商品怎么发布到网站上去？  Laravel如何为API编写文档_Laravel API文档生成与维护方法  laravel怎么实现图片的压缩和裁剪_laravel图片压缩与裁剪方法  清除minerd进程的简单方法  如何挑选高效建站主机与优质域名？  Python数据仓库与ETL构建实战_Airflow调度流程详解  昵图网官网入口 昵图网素材平台官方入口  学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？  大同网页,大同瑞慈医院官网？  Laravel怎么实现搜索高亮功能_Laravel结合Scout与Algolia全文检索【实战】  原生JS实现图片轮播切换效果  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  Win10如何卸载预装Edge扩展_Win10卸载Edge扩展教程【方法】  Python并发异常传播_错误处理解析【教程】  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  深圳网站制作设计招聘,关于服装设计的流行趋势，哪里的资料比较全面？  高性价比服务器租赁——企业级配置与24小时运维服务  详解Nginx + Tomcat 反向代理 负载均衡 集群 部署指南  javascript读取文本节点方法小结  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？