CSS Grid布局1fr列内容截断、列对齐异常如何解决

设置grid-template-columns: auto 150px auto 1fr;后出现1fr列截断、效果不符合预期，核心是两个CSS Grid默认规则导致的：

• Grid列默认最小宽度为auto，即1fr实际等价于minmax(auto, 1fr)，当前面的auto列随内容无限制撑开时，会挤压1fr列的分配空间，直接造成内容截断
• 网格容器默认没有设置统一的交叉轴对齐规则，不同列的内容高度不一致时，心形标识会随内容流错位，无法保持垂直对齐

按以下顺序调整样式即可满足需求：

1. 重置网格项的最小宽度限制，覆盖默认的min-width: auto规则，给1fr列留出正常的空间分配基础

   .grid-container > * {
     min-width: 0;
   }
   

2. 调整列模板规则，给原本无宽度上限的auto列增加内容适配的宽度约束，同时给容器设置统一垂直对齐规则，一次性解决列挤压和心形对齐问题

   .grid-container {
     grid-template-columns: fit-content(0) 150px fit-content(0) 1fr;
     align-items: center; /* 所有网格项垂直居中对齐 */
     column-gap: 8px; /* 列间距统一用gap设置，避免margin造成的对齐偏移 */
   }
   

3. 给Value列增加不换行规则，保证内容完整展示不换行

   .value-column {
     white-space: nowrap;
     /* 如果存在极端超长内容，可以加下面两行做省略号兜底，不会破坏整体布局
     overflow: hidden;
     text-overflow: ellipsis;
     */
   }
   

4. 心形标识列增加对齐兜底，避免图标本身的行高问题导致错位

   .heart-column {
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
   

这类多列混合auto和fr单位的Grid布局，只要出现列被挤压溢出的问题，优先检查网格项的min-width默认值、以及auto列是否无宽度上限，这两个是最高频的诱因。

内容的提问来源于stack exchange，提问作者Nadia