grid-template-columns: min-content min-content 是两列内容宽度差异大且需各自按最小内容宽排布的最直接写法，各列独立计算、不拉伸不压缩；误用 repeat(2, min-content) 会导致等宽失真。
grid-template-columns: min-content min-content 是最直接的写法
当两列内容宽度差异大、且都不希望被拉伸或压缩时，grid-template-columns: min-content min-content 能让每列严格按自身内容最小宽度排布。它不依赖容器宽度，也不受其他列影响，各列独立计算。
常见错误是误用 repeat(2, min-content) —— 这会导致两列取相同宽度（即最大那个 min-content 值），失去“各自适配”的意义。
- 适用场景：表格式数据对比、表单标签+输入框组合、双栏并列卡片（内容长度天然不均）
- 注意
min-content会把换行文本视为单行计算（如长 URL 或无空格字符串），可能撑宽整列；此时需配合max-width: 100%和overflow-wrap: break-word - 若某列内容为空，
min-content结果为 0，该列会塌缩——可加min-width: fit-content或显式设min-width: 50px防止过窄
想防溢出又保紧凑？用 fit-content(100%) 替代 min-content
fit-content(100%) 表示“取内容固有最小宽度与可用空间中较小者”，比纯 min-content 更健壮。它既能防止长内容撑破布局，又不会像 1fr 那样强制拉伸空白列。
例如：grid-template-columns: fit-content(100%) fit-content(100%)，在容器变窄时自动收缩，变宽时也不会无限制扩张。
- 性能上无额外开销，所有现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+）都支持
- 不适用于需要固定比例分配的场景（比如左栏必须永远是右栏 1/3 宽），这时应改用
1fr 2fr - 如果某列内容极短（如图标 + 单字），
fit-content(100%)可能仍偏窄，可叠加min-width: 80px保底线
列数不固定？别硬套两列，改用 grid-auto-columns: min-content
当实际列数由子元素数量动态决定（比如从 JS 渲染的 N 个 .item），就不能写死两列轨道。此时应放弃 grid-template-columns，改用自动列生成机制：
display: grid; grid-auto-columns: min-content; grid-auto-flow: column;
- 优点：完全响应子元素数量，新增一个元素就多一列，无需改 CSS
- 风险：
grid-auto-flow: column会改变 DOM 阅读顺序（从上到下 → 从左到右），对可访问性（a11y）和 SEO 不友好，慎用于主要内容区域 - 若需保持阅读流，应配合
grid-template-rows: repeat(auto-fit, minmax(1em, 1fr)))改为行优先换行，再用grid-auto-columns控制列宽
为什么不用原生 <table>？它根本做不到真自适应
<p>原生 <code><table> 的列宽行为由 <code>table-layout 控制：auto 模式下，浏览器只看首行内容定列宽，后续行内容超长会被截断或强制换行；fixed 模式则完全依赖第一行 <col> 或样式定义，内容变化毫无反应。
更关键的是，<table> 无法让不同列按各自内容独立收缩——你设了 <code>width: auto，结果所有列还是被最长那个单元格拖宽。
- 真正容易被忽略的点：Grid 的
min-content和fit-content()是逐单元格计算的，而 table 是整列统一定宽 - 如果已有 table 结构不能动，唯一补救是给每个
<td> 加 <code>width: fit-content+max-width: 100%，但兼容性差（IE 完全不支持） - 语义上，仅用于布局的 table 已被 W3C 明确标记为反模式，Grid 是当前唯一兼顾语义、控制力与可维护性的方案
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
