应使用 fit-content(100%) 而非 minmax() 实现表格类布局的列宽自适应，因 minmax() 强制所有列统一约束，无法支持各列独立收缩；fit-content(100%) 使每列取内容宽度与容器宽度的较小值，配合 grid-auto-rows 和子元素样式控制可达成理想效果。
直接用 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 替代 <table> 无法解决列宽按内容自适应的问题——<code>minmax() 是为“等宽弹性列”设计的，不是为“每列独立收缩”准备的。
为什么 minmax() 在表格场景下会失效
minmax() 的核心逻辑是统一约束所有轨道：它让每一列都遵守同一套最小/最大规则，而不是让每列根据自身内容单独计算宽度。表格类布局真正需要的是“各列独立取最小固有宽度”，而 minmax(200px, 1fr) 强制所有列至少 200px、最多均分剩余空间，结果就是窄内容列被撑开、宽内容列又被截断。
- 写
minmax(min-content, 1fr)→ 浏览器取整行中所有单元格的min-content最大值，所有列等宽（比如最长标题是 280px，所有列都变成 280px） - 写
minmax(auto, 1fr)→auto在minmax()中不合法，整条声明被忽略，回退到浏览器默认行为 - 误以为
1fr能“填满内容宽度” → 实际上1fr是弹性份额单位，和内容无关，只跟可用空间与轨道数有关
正确做法：用 fit-content(100%) 替代 minmax()
想让每列宽度紧贴内容又不溢出容器，该用 fit-content(100%)，不是 minmax()。它的含义是：“取该列内容自然宽度 和 容器可用宽度 的较小者”，天然适配表格语义。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
grid-template-columns: repeat(auto-fit, fit-content(100%))—— 动态生成列，每列独立收缩，内容短则窄，长则撑到容器边界 - 必须搭配
grid-auto-rows: minmax(min-content, auto)，防止空行塌陷或高度失控 -
gap建议设为clamp(0.25rem, 1vw, 0.5rem)，避免小屏下间隙占比过大挤压列宽 - Firefox 全支持，Chrome 117+ 已修复历史渲染 bug；若需兼容更旧 Chrome，可降级为
max-content+overflow: hidden
子项样式会悄悄破坏 fit-content 行为
即使列定义写对了，只要子元素加了某些样式，fit-content() 就可能退化成固定宽度行为。
- 给单元格内元素设
width: 100%或min-width: 200px→ 强行撑开列宽，覆盖fit-content计算 - 单元格用了
display: flex或white-space: nowrap→ 内容拒绝折行，导致宽度突破预期 - 图片或图标未设
max-width: 100%→ 溢出单元格，拉宽整列 - 解决方案：所有直接子元素加
max-width: 100%; overflow-wrap: break-word;，禁用white-space: nowrap
别忘了语义和可访问性
用 Grid 模拟表格时，<table> 的语义（<code><th>、<code><td>、<code>scope 属性）就丢失了。如果数据有行列关系、需要屏幕阅读器理解结构，就不能简单替换。
- 纯展示型“类表格布局”（如配置项列表、属性卡片）→ Grid +
fit-content()安全可用 - 真表格数据（财务报表、课程表、对比矩阵）→ 保留
<table>，用 <code>table-layout: auto+min-width控制关键列，再辅以word-break: break-word - 折中方案：用
role="table"+role="row"+role="cell"手动补语义，但测试成本高，仅限必要场景
真正麻烦的不是选 minmax() 还是 fit-content()，而是混淆了“弹性列数”和“内容驱动列宽”这两个根本不同的需求——前者靠 auto-fit + minmax()，后者靠 fit-content() 或显式单列定义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
