CSS网格布局：分数比例制作响应式价格表

本文深入解析了CSS Grid中fr单位在响应式价格表布局中的核心原理与实战陷阱，揭示fr并非按容器总宽比例分配而是基于扣除padding、gap和固定尺寸后的剩余空间进行划分，并通过repeat(auto-fit, minmax(280px, 1fr))实现智能列数收缩、align-items: stretch与flex-column+margin-top:auto组合解决卡片等高错位、minmax(0, 1fr)防止窄屏内容溢出等关键技巧，同时明确指出IE11对fr和现代Grid特性的完全不兼容，主张用@supports优雅降级至Flexbox而非强行打补丁，帮你避开90%开发者踩过的响应式网格“伪bug”。

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 更省心

好了，本文到此结束，带大家了解了《CSS网格布局：分数比例制作响应式价格表》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！