fr单位按剩余空间分配而非容器总宽，受padding、gap、min-width影响；响应式需用repeat(auto-fit, minmax(280px, 1fr))；等高靠align-items: stretch或flex-column+margin-top:auto；ie11不支持fr，应降级为flexbox。
grid-template-columns 用 fr 单位时，为什么列宽不按预期比例分配？
fr 不是像素或百分比，而是“剩余空间的份数”。如果网格容器有 padding、子项有 gap 或设置了 min-width，fr 就会失效——它只在“可用剩余空间”里切分，不是整个容器宽度。
-
grid-template-columns: 1fr 2fr表示两列瓜分“扣除 gap 和固定尺寸项后的剩余空间”，不是“占容器宽的 1/3 和 2/3” - 如果某列子项自带
min-width: 300px，且容器不够宽，那 1fr 列可能被撑到 300px，2fr 列反而更窄（甚至溢出） - 移动端小屏下，建议搭配
minmax(0, 1fr)防止内容撑破网格：例如grid-template-columns: repeat(auto-fit, minmax(0, 1fr))
如何让价格表在手机上自动从 3 列变 1 列？
别硬写 grid-template-columns: 1fr 1fr 1fr —— 它不会响应式。要用 repeat() + auto-fit + minmax() 组合，这才是现代 Grid 响应式的标准写法。
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))：每列最小 280px，最大填满可用空间；屏幕缩小时，自动减少列数 - 配合
gap: 1rem，但注意：gap 会参与剩余空间计算，所以 minmax 的最小值要大于子项真实内容宽度 + gap 影响 - 避免用
auto-fill——它会渲染空列占位，导致价格表下方出现大片空白
价格卡片内容高度不一致，导致网格错位怎么办？
Grid 默认按行对齐，但每张卡片文字行数、按钮数量不同，align-items: start（默认）会让底部参差不齐，看起来像 bug。
- 加
align-items: stretch强制等高，但前提是卡片内部不设height或min-height干扰 - 更稳妥的是在卡片根元素上设
display: flex; flex-direction: column;，再给关键区块（如价格、按钮）加margin-top: auto下推按钮到底部 - 慎用
align-content: stretch——它只对多行网格有效，单行无效
IE11 兼容不了 grid-template-columns: 1fr？那就别强求
IE11 对 Grid 支持极差，fr 单位完全不识别，repeat() 和 auto-fit 直接报错。想兼容就得换方案，而不是打补丁。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports not (display: grid)降级为 Flexbox 布局，别试图用 JS 检测后动态改 CSS - 不要引入
postcss-grid-kiss或类似插件——它们生成的 fallback 代码不可控，且无法处理gap和minmax - 如果业务明确要求支持 IE11，直接放弃 Grid 做价格表，改用
display: table-cell或媒体查询 + float 更省心
minmax(0, 1fr) 中那个 0——它不是摆设，是防止内容溢出的关键开关。没它，flexible 列在窄屏下照样崩。 
