minmax() 定义网格轨道的弹性范围，非简单设最小最大宽度；它使列先保持最小宽度，再按比例分配剩余空间，需配合 auto-fit、媒体查询等实现响应式断行与 Safari 兼容。
minmax() 在 grid-template-columns 里到底控制什么
minmax() 不是让列“最小多少、最大多少”这么简单。它定义的是单个网格轨道的弹性范围：当容器缩放时，该列先按 min 固定，剩余空间再按 max 分配——但前提是其他列也在用 minmax() 或 fr，否则固定列会挤占弹性列的空间。
定价表格常见三列结构（基础 / 标准 / 高级），理想行为是：小屏下堆叠（1列），中屏并排（2列），大屏全显（3列）。直接写 minmax(300px, 1fr) 会导致小屏依然强行撑出 300px，溢出滚动。正确做法是配合 repeat() 和媒体查询，或用 auto-fit + minmax() 让 Grid 自动断行。
- 用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))是响应式起点，它让每列至少 280px，但不超过 1fr，空余空间均分 - 加
grid-auto-flow: column会强制横向填满，通常不需要；默认row才符合定价卡从上到下排列的视觉流 - 若某列内容超长（比如功能列表），需额外加
min-width: 0防止 Grid 忽略minmax()的最小约束
为什么 pricing-table 在 Safari 上列宽不一致
Safari 对 minmax() 的解析比 Chrome/Firefox 更保守，尤其在嵌套 Grid 或存在 fit-content() 时，容易把 1fr 当作固定值处理，导致列宽卡死。这不是 bug，而是规范中对 “fractional unit in indefinite size context” 的实现差异。
实测有效缓解方式：
立即学习“前端免费学习笔记（深入）”；
- 给容器显式设
width: 100%或max-width: 100vw，避免 Safari 在 flex 容器内计算 fr 时丢失上下文 - 避免在同一个
grid-template-columns里混用minmax(280px, 1fr)和200px—— Safari 会优先满足固定列，压缩弹性列至最小值 - 加
grid-column-gap: clamp(1rem, 4vw, 2rem)替代固定 gap，减少 Safari 对总宽度估算误差
如何让“推荐”标签在不同列宽下始终居中且不换行
定价表常有一列标“Most Popular”，需要绝对居中、不随文字长度拉宽列、也不因列收缩而折行。靠 text-align: center 不够——列变窄时文字仍会 wrap。
解决方案是脱离文档流 + 弹性约束：
- 用
position: relative包裹卡片，内部加position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%)定位标签 - 给标签本身设
white-space: nowrap; max-width: 80%; overflow: hidden; text-overflow: ellipsis，防超长截断 - 关键：父列必须有明确的
min-width（如minmax(280px, 1fr)中的 280px），否则 Safari 下left: 50%可能算错基准
移动端堆叠时，怎么避免卡片高度参差不齐
用 auto-fit + minmax() 实现堆叠，本质是把列数设为 1，但每张卡片高度由内容决定，导致视觉断裂。不能只靠 align-items: stretch，因为 Grid 默认按行对齐，单列时每张卡是独立行。
真正可控的方式：
- 给 Grid 容器加
grid-auto-rows: 1fr，让每行（即每张卡）等高，但注意这会让短内容卡片留白 - 更自然的做法是改用
display: grid+grid-template-rows: repeat(3, minmax(min-content, max-content))配合grid-row: span 3控制主卡高度，但复杂度陡增 - 务实建议：放弃严格等高，用
min-height: 420px设底线，配合justify-content: start避免顶部空白累积
最易被忽略的一点：所有卡片内的标题、价格、按钮必须用 min-height 或 line-clamp 统一基线，否则 minmax() 的弹性再好，视觉节奏也会崩。
