Grid不等宽列核心是用不同系数fr组合与repeat()简化重复模式，fr按比例分配剩余空间而非固定宽度，需防内容撑开失效，配合minmax()可加弹性约束。

Grid网格布局中实现不等宽列，核心是灵活运用 repeat() 函数与不同数值的 fr 单位组合，而非强行写死像素值。关键在于理解 fr 是“剩余可用空间的份数”，不是固定宽度，多个 fr 之间按比例分配剩余空间。

用 repeat() 搭配混合 fr 值定义列轨道

你可以在 grid-template-columns 中直接写多个不同系数的 fr，repeat() 只是用来简化重复模式——它本身不强制等宽，只要括号里填的是非均匀值即可。

• 比如三列：左侧窄、中间宽、右侧适中 → grid-template-columns: 1fr 2fr 1.5fr;
• 想让第1列固定 120px，其余两列按 3:2 分配剩余空间 → grid-template-columns: 120px 3fr 2fr;
• 用 repeat() 表达“两个 1fr 列 + 一个 2fr 列” → repeat(2, 1fr) 2fr，等价于 1fr 1fr 2fr

避免常见误解：fr 不等于百分比，也不受内容撑开影响

fr 只参与“容器剩余空间”的分配，前提是所有列没有设置 min-width 或内容强制溢出。如果某列内容很长且未设置 min-width: 0 或 overflow，浏览器可能优先满足内容宽度

• 安全做法：给网格子项加 min-width: 0（尤其内含长文本或 flex 容器时）
• 不要混用 fr 和 % 在同一轨道定义中，逻辑易混乱；如需响应式，用 minmax() + fr 更可控

进阶技巧：用 minmax() 配合 fr 实现弹性+约束

纯 fr 有时太“软”，加一层最小/最大限制更实用。例如：“至少 100px，最多占满，但整体按比例分”：

• grid-template-columns: minmax(100px, 2fr) minmax(150px, 3fr) 1fr;
• 此时三列基础比例仍是 2:3:1，但各自有下限保护，不会被压缩到不可读
• 再结合 repeat(3, minmax(80px, 1fr))) 就是“最多等宽，但至少 80px”，适合卡片列表

基本上就这些。不复杂但容易忽略细节：fr 是动态份额，repeat 是语法糖，真正决定不等宽的是你写的那些数字比例和约束条件。

# 浏览器  # overflow  # flex  # 多个  # 按比例  # 而非  # 的是  # 进阶  # 你可以  # 最多  # 不受  # 仍是  # 很长 

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

相关推荐： Python图片处理进阶教程_Pillow滤镜与图像增强  js实现点击每个li节点，都弹出其文本值及修改  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  laravel怎么通过契约（Contracts）编程_laravel契约（Contracts）编程方法  ,在苏州找工作，上哪个网站比较好？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  Laravel如何清理系统缓存命令_Laravel清除路由配置及视图缓存的方法【总结】  黑客入侵网站服务器的常见手法有哪些？  IOS倒计时设置UIButton标题title的抖动问题  Laravel软删除怎么实现_Laravel Eloquent SoftDeletes功能使用教程  韩国代理服务器如何选？解析IP设置技巧与跨境访问优化指南  黑客如何利用漏洞与弱口令入侵网站服务器？  学生网站制作软件,一个12岁的学生写小说，应该去什么样的网站？  深圳防火门网站制作公司,深圳中天明防火门怎么编码？  php增删改查怎么学_零基础入门php数据库操作必知基础【教程】  如何确认建站备案号应放置的具体位置？  百度浏览器如何管理插件 百度浏览器插件管理方法  高性价比服务器租赁——企业级配置与24小时运维服务  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  Laravel如何使用Passport实现OAuth2？（完整配置步骤）  香港服务器选型指南：免备案配置与高效建站方案解析  如何在阿里云部署织梦网站？  Android仿QQ列表左滑删除操作  香港服务器如何优化才能显著提升网站加载速度？  Laravel如何记录自定义日志？（Log频道配置）  大同网页,大同瑞慈医院官网？  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  如何挑选最适合建站的高性能VPS主机？  简历没回改：利用AI润色让你的文字更专业  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  如何为不同团队 ID 动态生成多个独立按钮  详解Android图表 MPAndroidChart折线图  Thinkphp 中 distinct 的用法解析  详解jQuery停止动画——stop()方法的使用  Laravel如何处理JSON字段_Eloquent原生JSON字段类型操作教程  Laravel Docker环境搭建教程_Laravel Sail使用指南  Laravel如何实现RSS订阅源功能_Laravel动态生成网站XML格式订阅内容【教程】  中国移动官方网站首页入口 中国移动官网网页登录  Laravel如何实现用户注册和登录？（Auth脚手架指南）  使用豆包 AI 辅助进行简单网页 HTML 结构设计  海南网站制作公司有哪些,海口网是哪家的？  javascript中的数组方法有哪些_如何利用数组方法简化数据处理  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】  Laravel distinct去重查询_Laravel Eloquent去重方法  Android使用GridView实现日历的简单功能  如何实现javascript表单验证_正则表达式有哪些实用技巧  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】