grid-template-columns: auto 1fr 能让图标和文字对齐，因为 auto 列收缩至图标固有宽度，1fr 列占据剩余空间使文字左对齐；需确保图标为 Grid 子项且无 width/flex 干扰，配合 align-items: start 实现多行顶部对齐。
为什么 grid-template-columns: auto 1fr 能让图标和文字对齐
因为 auto 列会收缩到图标内容的固有宽度（比如 或 的实际渲染尺寸），而 1fr 列会占据剩余所有可用空间，自动把文字“推”到图标右侧并左对齐。这比用 flex 配 min-content 更可控，尤其在多行文本或动态内容下不易错位。
注意：图标容器必须是 Grid 子项，且不能设 width 或 flex 相关属性干扰列计算。
图标列太宽？检查这些常见干扰项
即使写了 grid-template-columns: auto 1fr，图标列仍可能异常撑开，通常是因为：
- 图标元素本身设置了
display: block且含内边距/外边距 —— 改为display: inline-block或重置margin/padding - 父容器设置了
min-width或width限制了整体 grid 容器宽度，导致auto列被迫按最小约束扩展 —— 移除或改用max-width - 用了
height/width，浏览器按原始尺寸渲染拉伸 —— 显式设置width: 1.2em、height: 1.2em并配object-fit: contain - 图标字体（如 Font Awesome）用了伪元素
::before，但父元素未设font-size—— 在图标容器上加font-size: 1.2em
如何让多行文字顶部对齐图标
默认情况下，1fr 列内的文字若换行，基线可能和图标底部对齐，造成视觉偏移。解决方法是给整个 grid 容器加 align-items: start：
.icon-list {
display: grid;
grid-template-columns: auto 1fr;
align-items: start; /* 关键：让所有行首对齐 */
gap: 0.5rem;
}
如果只希望某几项居中（比如单行标题），可单独给对应子项加 align-self: center，不影响其他项。
响应式断点下怎么保持图标不被压缩
小屏幕时，1fr 列变窄，有时图标会被挤压变形（尤其 SVG 无 viewBox 或 img 无 max-width）。稳妥做法是：
- SVG 图标务必带
viewBox属性，并在 CSS 中设width: 1.2em; height: 1.2em; - 用
@container（如果支持）或媒体查询，在窄屏下把 grid 改为grid-template-columns: 1fr，再用display: flex+gap垂直堆叠图标和文字 - 避免在图标列里放纯文字（比如 “✓”），它没有固有尺寸，
auto会按字体大小+行高计算 —— 改用 SVG 或带font-size限定的伪元素
真正难处理的是图标尺寸随文字缩放变化的场景，这时候得放弃 auto，改用 minmax(1.2em, max-content)，但要小心 Safari 对 max-content 的兼容性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
