如何用CSS实现CSS Grid在仅含单个按钮时自动折叠多余列？

你可以利用CSS伪类检测容器内的按钮数量，动态调整网格列布局，无需修改HTML结构：

方案一（现代浏览器适配） #

使用:has()伪类精准判断容器内的按钮数量，修改网格布局：

#container {
  background: green;  
  right: 0;
  position: absolute;
  display: grid;
  grid-template-columns: 1fr minmax(0, 1fr);
}

/* 当容器中没有第二个按钮时，切换为单列布局 */
#container:not(:has(.button:nth-child(2))) {
  grid-template-columns: 1fr;
}

.button {
  text-align: center;
  padding: 5px;
  min-width: 40px;
  width: auto;
  margin: 5px;
  background: yellow;
}

原理：#container:not(:has(.button:nth-child(2)))会匹配仅包含一个按钮的容器，将其网格列调整为1fr，让单个按钮占满容器宽度，消除右侧空白；存在两个按钮时，保持原布局保证按钮等宽。

方案二（全浏览器兼容） #

如果需要兼容不支持:has()的旧版浏览器，可使用:only-child伪类让单个按钮横跨网格列：

#container {
  background: green;  
  right: 0;
  position: absolute;
  display: grid;
  grid-template-columns: 1fr minmax(0, 1fr);
}

.button {
  text-align: center;
  padding: 5px;
  min-width: 40px;
  width: auto;
  margin: 5px;
  background: yellow;
}

/* 当按钮是容器唯一子元素时，横跨所有列 */
.button:only-child {
  grid-column: 1 / -1;
}

原理：无需修改容器的网格列配置，直接让唯一的按钮占据整个网格的列空间，既保留双按钮的等宽逻辑，又消除单按钮场景的空白。

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