fr单位分配的是扣除固定尺寸、gap等内容后的剩余空间份数，%则直接按容器总宽计算；混用时顺序决定计算优先级，fr不回退压缩%列。

fr单位分的是“减完才剩的蛋糕”，百分比算的是“整个蛋糕”

fr和%在grid-template-columns里看起来都能实现等分，但底层逻辑完全不同。fr不看容器总宽，只对扣除固定尺寸、内容最小宽度、gap、滚动条之后的剩余空间做份数分配；%则直接按容器总宽计算，哪怕后面跟着gap或内容撑开，它也不管。

比如容器宽1000px，设grid-column-gap: 20px：

• grid-template-columns: 1fr 1fr → 先扣掉20px gap，剩下980px，每列得490px
• grid-template-columns: 50% 50% → 每列直接是500px，两列加起来1000px，再加20px gap → 总宽1020px，溢出

混用%和fr时，顺序决定谁先“吃肉”

浏览器按声明顺序逐个解析轨道尺寸：百分比列先按容器总宽算出绝对值，剩下的空间才交给fr分配。fr不会回退去压缩前面的%列。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• grid-template-columns: 50% 1fr 1fr → 第一列占50%（如500px），剩下500px由两个1fr平分，各250px
• grid-template-columns: 1fr 50% 1fr → 还是先算50%（500px），再把剩下500px分给前后两个1fr，各250px，中间列反而最宽
• 想让%列“被挤压”，得用minmax()配合，比如minmax(0, 50%) 1fr，但要注意minmax(0, 50%)在某些旧浏览器中不被支持

fr在高度方向失效，往往是因为父容器没“立规矩”

1fr在grid-template-rows里表现异常，90%的情况不是fr写错了，而是网格容器本身没有可参照的高度。fr需要明确的“可用空间”，而块级元素默认height: auto，不继承父高。

• 父容器设了height: 300px，子网格必须显式设height: 100%或height: 300px，否则1fr无从计算
• height: 100vh或height: 100%生效的前提是所有祖先元素（包括html、body）都有明确高度，否则链路断掉，100%变成auto
• 用align-items: stretch（默认值）不能替代高度约束——它只拉伸内容盒，不创造可用空间

真正健壮的响应式网格，靠的是fr + minmax()，不是单用fr

纯1fr 1fr 1fr在小屏上容易让内容被压扁，纯%又难控制最小宽度。minmax()才是把fr落地的关键。

• minmax(250px, 1fr)：每列至少250px，超出部分再均分——适合卡片列表
• repeat(auto-fit, minmax(300px, 1fr)))：尽可能多放300px宽的列，空余由1fr消化；auto-fit会合并空轨道，auto-fill则保留全部轨道（含空），影响换行行为
• 注意minmax(min-content, 1fr)中min-content可能因长单词撑开列宽，必要时加min-width: 0和overflow: hidden兜底

实际项目里，fr的“灵活”是有条件的——它依赖上下文干净、尺寸约束完整、内容行为可控。漏掉任意一环，比如忘了设height、没处理min-content、或误以为%和fr可互换，都会让布局当场失控。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！