如何调整CSS grid列宽规则，使元素过滤后右侧两列仍保持原有位置？

问题本质 #

你当前的布局问题是CSS Grid默认的自动排列规则导致的：当第一列的元素被移除后，后续元素会自动填充前面空出的第一列单元格，因此原本的右侧元素会左移。

修复方案 #

最稳妥的实现方式是给右侧的两个元素显式指定固定的网格列位置，强制它们永远渲染在第二列，不受左侧元素是否存在的影响。

步骤1：给右侧元素添加定位规则 #

给所有属于右侧的元素添加如下CSS配置，你可以直接给这两个元素加公共类（比如grid-right-item）后设置样式：

.grid-right-item {
  grid-column: 2 / 3;
}

步骤2：保留原有配置即可 #

你原本的外层容器配置不需要修改，保留即可：

display: grid;
grid-template-columns: 1fr auto;
grid-column-gap: 1.25em;
align-items: center;

右侧元素原有配置也可以保留，用来控制内容右对齐和垂直居中：

display: grid;
justify-content: right;
align-content: center;

效果说明 #

配置完成后，即使左侧两个元素全部被过滤删除，第一列会依然保持1fr的宽度留空，剩余的两个右侧元素会固定在第二列位置，不会发生左移。

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