用 display: inline-grid 是为了让网格容器成为行内级元素，宽度由内容撑开，能与文字等行内元素并排显示；而 display: grid 会使其变为块级元素，独占一行。
为什么用 display: inline-grid 而不是 display: grid
因为 display: grid 会让容器变成块级元素，自动占满父容器整行宽度；而 display: inline-grid 让它变成行内级网格容器——宽度由内容撑开，能和其他行内元素（比如文字、span、图标）并排显示，不打断文本流。
inline-grid 容器的尺寸和对齐行为怎么控制
它本身不响应 width 和 height 的“强制设定”，但会根据子项（grid items）的尺寸、grid-template-columns 和内容自动计算最小宽度。常见可控点包括：
-
vertical-align必须显式设置（如vertical-align: top），否则默认按基线对齐，容易和旁边文字错位 - 子项若设了固定
width或使用fr单位，会影响整体宽度；用auto或max-content更易预测 - 父元素若有
font-size: 0或white-space: nowrap，可能意外压缩或撑开inline-grid容器 - 不要指望
margin-top/bottom在垂直方向起作用——它只影响行内盒的外边距盒（margin box），但不会推上下行
和 display: inline-block 比，inline-grid 有什么实际区别
核心差异不在“是否并排”，而在于内部布局能力：
-
inline-block容器内部仍是普通文档流，要靠float或额外 wrapper 实现多列对齐；inline-grid直接支持grid-template-columns、justify-items等原生网格控制 -
inline-grid子项可跨行跨列（用grid-column/grid-row），inline-block子项做不到 - 当子项高度不一致时，
inline-grid默认按stretch对齐，inline-block默认按基线对齐，视觉效果更整齐 - IE11 不支持
inline-grid（只支持grid），如果还要兼容，得降级 fallback
一个最小可用示例及常见失效原因
下面这段代码能让两个按钮并排、且按钮内部用网格控制图标和文字对齐：
<div class="text-wrap">
此处有一段文字，
<div class="btn-grid">
<button><span class="icon">?</span>打开</button>
<button><span class="icon">?</span>保存</button>
</div>
后面还有文字。
</div>
<p><style>
.btn-grid {
display: inline-grid;
grid-template-columns: auto auto;
gap: 4px;
vertical-align: middle; /<em> 关键：避免和文字基线错位 /
}
.btn-grid button {
display: grid;
grid-template-columns: 20px 1fr;
align-items: center;
gap: 6px;
padding: 4px 8px;
}
</style></p>
如果发现它还是独占一行，先检查：btn-grid 是否被父元素设置了 width: 100% 或 text-align: center；再确认有没有意外继承了 display: block 的 reset 样式；最后看控制台是否报 Invalid property value ——比如用了 grid-template-areas 但没配 grid-area 名称。
真正难调的不是写法，而是它混在文本流里时，line-height、font-size、空白符缩进这些看不见的层叠效果会悄悄干扰位置。建议调试时临时加 outline: 1px solid red 看真实边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
