使用 contain: inline-size 可使特定网格单元格在自动列宽计算中忽略其内容宽度，从而避免长文本强制扩大所在列，同时保留文本内换行能力。
使用 contain: inline-size 可使特定网格单元格在自动列宽计算中忽略其内容宽度，从而避免长文本强制扩大所在列，同时保留文本内换行能力。
在 CSS Grid 布局中，当使用 grid-template-columns: auto auto（或 inline-grid 配合 auto 列）时，所有列宽由各轨道中最大内容内联尺寸（inline-size） 决定——即最长不可折行的文本或元素宽度。这导致一个常见痛点：绝大多数单元格含短文本（如 "rate r="），但最后一行某个单元格包含大段说明性文字（如 Lorem ipsum），该长文本会单向撑开整列，破坏紧凑布局。
传统思路常尝试 minmax(0, max-content)、fit-content() 或 max-width，但这些方案或无效（max-width 不影响 grid track sizing）、或需预设固定阈值（违背响应式与服务端动态内容前提），或引发意外截断。
✅ 推荐解法：contain: inline-size
这是现代 CSS 中专为此类场景设计的轻量级、声明式方案。它指示浏览器在计算该元素所在网格轨道（column）的 auto 尺寸时，完全忽略该元素的内容内联尺寸贡献，仅依据其他同列单元格（如前面的 "total number N="）来确定列宽；同时，该元素自身仍可正常响应容器宽度进行软换行（white-space: normal 默认行为）。
.grid-container {
display: inline-grid;
grid-template-columns: auto auto; /* 两列均按内容最小宽度自适应 */
gap: 3px;
border: 1px solid darkcyan;
}
.cell1 {
text-align: right;
background-color: rgba(0, 0, 0, 0.35);
}
.cell2 {
text-align: left;
}
.cell1-special {
grid-column: 1 / span 1;
align-self: start; /* 推荐显式设置对齐，避免 align-self: left 的误用（left 非有效值） */
background-color: rgba(128, 0, 0, 0.35);
contain: inline-size; /* ✅ 关键：隔离内联尺寸计算 */
}<div class="grid-container"> <div class="cell1">total number N=</div> <div class="cell2">100 ... 200</div> <div class="cell1">repeat number M=</div> <div class="cell2">1 or 2</div> <div class="cell1">rate r=</div> <div class="cell2">0.1-0.2</div> <div class="cell1-special">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> <div class="cell2"></div> </div>
⚠️ 注意事项：
-
contain: inline-size属于 CSS Containment Module Level 1，已获 Chrome 84+、Firefox 69+、Safari 15.4+ 全面支持（caniuse.com/contain），IE 不支持，若需兼容旧环境需降级方案（如包裹<div> + <code>max-width+overflow-wrap组合）。 -
contain是简写属性，此处等价于contain: size inline-size；若无需布局隔离，仅inline-size即可，更轻量。 -
align-self: left无效（合法值为start/end/center/stretch等），应改为align-self: start或直接省略（默认继承stretch，但文本内容会自然顶部对齐）。 - 此方案不改变 DOM 结构，无需新增空列、子网格或 JS 干预，完全符合“纯 CSS”与“服务端动态内容”前提。
总结：contain: inline-size 是解决「Grid 中某单元格长文本不应参与列宽计算」问题的最优实践——语义清晰、代码简洁、效果精准，是现代 CSS 布局中值得掌握的关键技巧。
立即学习“前端免费学习笔记（深入）”；
