CSS Grid设置text-right后等列宽失效问题求助

你的问题核心在于两点：

1. 子元素的margin会干扰Grid轨道的宽度计算，导致实际可用空间分配不均；
2. 默认的1fr轨道会优先适配子元素的最小内容宽度，当某列内容超长时，会被强行撑宽，破坏等分规则。

下面给出两种可行的解决方案：

方案一：使用Grid原生gap+minmax(0,1fr)（推荐） #

直接用Grid的gap控制列间距，同时用minmax(0,1fr)强制轨道等分，彻底避免内容影响列宽：

.grid-equal-columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr); /* 强制轨道以0为最小宽度，按比例等分 */
    gap: 20px; /* 替代子元素margin，实现统一列间距 */
}
.grid-equal-columns > * {
    overflow: hidden;
    text-align: right;
    /* 移除子元素margin，改用gap控制间距 */
}

对应的HTML保持不变：

<div class="grid-equal-columns">
  <div>Sample</div>
  <div>12122</div>
  <div>hello text</div> 
  <div>44444</div> 
  <div>5555</div>
  <div>6666666666666666666666666</div>
</div>

方案二：保留子元素margin的兼容方案 #

如果必须保留子元素的margin，可以通过盒模型调整确保尺寸不溢出轨道：

.grid-equal-columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}
.grid-equal-columns > * {
    overflow: hidden;
    text-align: right;
    margin: 10px;
    box-sizing: border-box;
    width: calc(100% - 20px); /* 抵消左右margin的宽度影响 */
}

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